/* The Dark/Light switch, and the Light theme. Dark is the base stylesheets, which this file leaves alone. */
.theme-switch {
  flex: none;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}

.theme-switch:hover {
  opacity: 0.75;
}

.theme-switch:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Header layouts: on the home page the switch sits next to the logout button. */
.home-top .theme-switch {
  margin-left: auto;
  margin-right: 12px;
  color: #f7fafc;
}

html[data-theme="light"],
html[data-theme="light"] body {
  color-scheme: light;

  --bg-start: #fff;
  --bg-middle: #fff;
  --bg-end: #fff;
  --text: #000;
  --muted: #444;
  --subtle: #555;
  --accent: #14568a;
  --icon: #0b2a47;
  --ink: #000;
  /* Only the thin outline of an ink dot: without it white ink and unknown inks vanish on white. */
  --ink-ring: rgba(0, 0, 0, 0.4);
  --line: #c3d2df;
  --panel: #fff;
  --panel-solid: #e6f2fb;
  --quantity-frame: rgba(0, 0, 0, 0.6);
  --quantity-fill: #e6f2fb;

  --navy: #0b2a47;
  --navy-muted: #444;
  --soft: #e6f2fb;
  --soft-strong: #d3e8f7;
  --soft-line: #9cc3e0;
  --hover: rgba(20, 86, 138, 0.09);
  --danger: #b3261e;
  --danger-hover: rgba(179, 38, 30, 0.1);
  --warn: #7a5200;
  --warn-line: rgba(122, 82, 0, 0.5);
  --overlay: rgba(10, 30, 50, 0.4);
  --window-shadow: 0 16px 48px rgba(10, 30, 50, 0.22);
}

html[data-theme="light"] {
  /* Shared */
  body { background: #fff; color: #000; }
  .backdrop { background: #fff; }
  .backdrop .shape { display: none; }

  .brand,
  .topbar .brand,
  .home-top .brand { color: var(--navy); }

  .brand:focus-visible,
  .home-top .brand:focus-visible,
  .home-top__logout:focus-visible { outline-color: var(--navy); }

  /* Everything that was a light-blue filled button */
  .btn,
  .card__doc:not(:disabled),
  .card.is-editing .card__edit,
  .ask__ok:not(.is-danger),
  .card__order {
    border: 1px solid var(--soft-line);
    background: var(--soft-strong);
    box-shadow: none;
    color: #000;
  }

  .btn:hover,
  .card__doc:hover:not(:disabled),
  .card.is-editing .card__edit:hover:not(:disabled) { filter: brightness(0.95); }

  .ask__ok:not(.is-danger):hover,
  .card__order:hover { background: #c2dff4; }

  /* Everything that was a light-blue outline */
  .card__edit,
  .card__link-button,
  .sheet-retry,
  .card__print {
    border-color: var(--navy);
    color: var(--navy);
  }

  .color-edit__add,
  .admin__add,
  .print-edit__ok { color: var(--navy); }

  .card.is-editing .card__link-button:disabled { border-color: var(--line); background: transparent; color: var(--subtle); }

  .card__edit:hover:not(:disabled),
  .card__link-button,
  .card__link-button:hover,
  .sheet-retry:hover:not(:disabled),
  .card__print:hover,
  .tab:hover,
  .icon-btn:hover,
  .topbar__home:hover,
  .topbar__new:hover,
  .order__two-weeks:hover,
  .order__calendar:hover { background: var(--hover); }

  /* Fields */
  .field__input,
  .field__input:focus,
  .search__box input,
  .advanced input[type="number"],
  .advanced select,
  .order__field input,
  .order__field textarea,
  .order__select,
  .edit-field,
  .packing__swap,
  .print-edit__machine,
  .layer-edit__select,
  .ask__input,
  .order__comment,
  .switch { background: #fff; }

  .packing-tool { background: #fff; }
  .packing-tool--done:not(:disabled) { background: var(--accent); color: #fff; }

  .field__input:-webkit-autofill { box-shadow: 0 0 0 100px #fff inset; }
  .order__field input[type="date"] { color-scheme: light; }
  .search__box .icon,
  .search__box input::placeholder { color: var(--subtle); }

  .toggle[aria-expanded="true"] .switch { background: var(--soft-strong); }

  /* Windows */
  .login,
  .ask,
  .order__busy:not(.has-video) {
    background: var(--soft);
    box-shadow: var(--window-shadow);
  }

  .card {
    background: #fff;
    box-shadow: var(--window-shadow);
  }

  .login::backdrop,
  .card::backdrop,
  .ask::backdrop,
  .order__busy::backdrop {
    background: var(--overlay);
    backdrop-filter: none;
  }

  .card__band { background: var(--soft); color: var(--navy); }
  .card__mode,
  .card__article-edit.is-empty { color: var(--muted); }

  /* A clip stays dark in both themes, so its text stays white. */
  .order__busy.has-video { color: #fff; }
  .order__busy:not(.has-video) .order__spinner {
    border-color: rgba(20, 86, 138, 0.25);
    border-top-color: var(--accent);
  }

  /* Landing */
  .site-top {
    border-bottom: 1px solid var(--line);
    background: #fff;
    box-shadow: none;
    color: var(--navy);
  }

  .logo { color: var(--navy); text-shadow: none; }

  .beacon,
  .login__mark {
    border-color: var(--soft-line);
    background: var(--soft);
  }

  /* Catalog and orders */
  .tab[aria-current="page"] { background: #fff; }
  .advanced { background: var(--soft); }
  .table td { border-bottom-color: var(--line); }
  .table tbody tr:hover,
  .table tbody tr.is-active { background: var(--soft); }

  /* Warnings and errors */
  .badge { border-color: var(--warn-line); color: var(--warn); }
  .card__check { border-color: var(--warn-line); color: var(--warn); }

  .badge--deleted,
  .card__delete { border-color: var(--danger); color: var(--danger); }

  .login__error,
  .order__error,
  .order__packing-missing,
  .order-print__missing,
  .admin__status.is-bad,
  .ask__error,
  .sheet-problem { color: var(--danger); }

  .row-delete:hover,
  .color-edit__remove:hover,
  .print-edit__clear:not(.is-undo):hover { background: var(--danger-hover); color: var(--danger); }
  .card__delete:hover { background: var(--danger-hover); }

  /* Home page */
  .home-page { background: #fff; color: #000; }

  .home-top {
    border-bottom: 1px solid var(--line);
    background: #fff;
    box-shadow: none;
  }

  .home-top .theme-switch { color: var(--navy); }

  .home-top__logout {
    border-color: var(--navy);
    background: transparent;
    color: var(--navy);
  }

  .home-top__logout:hover { background: var(--hover); color: var(--navy); }
  .home-top__logout:active { background: var(--soft-strong); }

  .action {
    border: 1px solid var(--soft-line);
    background: var(--soft);
    box-shadow: none;
    color: #000;
  }

  .action:hover {
    background: var(--soft-strong);
    box-shadow: 0 0 0 3px rgba(20, 86, 138, 0.18);
  }

  .action:active { background: #c2dff4; box-shadow: none; }

  .notebook__paper { fill: rgba(11, 42, 71, 0.08); }
  .notebook__vane { fill: rgba(11, 42, 71, 0.25); }
}