/* Shared colour tokens and the light/dark theme for every signed-in and
   sign-in page (2026-10-06, Tim: "extend the dark skin to the account and
   admin pages"). Each view keeps its own light :root block for the six base
   tokens (ink, paper, paper-raised, accent, muted, line); this sheet adds the
   status tokens both modes need and the dark values for all of them. The
   dark rules carry an attribute selector, so they beat the views' plain
   :root blocks whatever the order. /assets/theme.js stores the viewer's
   choice as data-theme on <html>; with no choice the OS setting applies.

   Accent: client pages use --teal, admin pages --gold (each view's :root
   points --accent at one of them), so the dark set can lighten both without
   knowing which page it is on. */
:root {
  --teal: #0F6E6B;
  --gold: #B8860B;
  --crit: #A6392E;
  --good: #2E7D32;
  --warn: #A16A00;
  --danger: #A6392E;
  --danger-bg: #F8E7E4;
  --danger-line: #E4B7B0;
  --good-bg: #E6F0E7;
  --good-line: #BFD8C2;
  --notice-bg: #FDF0D9;
  --notice-line: #E8C88A;
  --notice-ink: #6B4A00;
  --notice-btn: #A16A00;
  --gold-bg: #FDF6E7;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E8EAE4; --paper: #121412; --paper-raised: #1C1F1C; --muted: #9AA39E; --line: #2C312D;
    --teal: #4FB3AE; --gold: #D9A441;
    --crit: #E07068; --good: #6CC070; --warn: #E4B04A; --danger: #E07068;
    --danger-bg: #3A1A17; --danger-line: #6B2F2A;
    --good-bg: #17301A; --good-line: #2E5A33;
    --notice-bg: #3A2E10; --notice-line: #5A4718; --notice-ink: #E4B04A; --notice-btn: #B8860B;
    --gold-bg: #2E2510;
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .brand-logo { filter: brightness(0) invert(1); }
}
:root[data-theme="dark"] {
  --ink: #E8EAE4; --paper: #121412; --paper-raised: #1C1F1C; --muted: #9AA39E; --line: #2C312D;
  --teal: #4FB3AE; --gold: #D9A441;
  --crit: #E07068; --good: #6CC070; --warn: #E4B04A; --danger: #E07068;
  --danger-bg: #3A1A17; --danger-line: #6B2F2A;
  --good-bg: #17301A; --good-line: #2E5A33;
  --notice-bg: #3A2E10; --notice-line: #5A4718; --notice-ink: #E4B04A; --notice-btn: #B8860B;
  --gold-bg: #2E2510;
  color-scheme: dark;
}
:root[data-theme="dark"] .brand-logo { filter: brightness(0) invert(1); }

/* The toggle: a quiet pill. In a header where the view places it, or floating
   bottom-left when /assets/theme.js has to add one (the chat launcher owns
   bottom-right). */
.theme-toggle {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; white-space: nowrap;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--muted); }
/* button.theme-toggle beats the views' generic button rules (width: 100%,
   accent backgrounds, white text) on the sign-in and 2FA cards. */
button.theme-toggle, button.theme-toggle.floating {
  width: auto; height: auto; margin: 0; display: inline-block; line-height: normal; text-transform: none; letter-spacing: normal;
  font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--paper-raised); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
}
button.theme-toggle:hover { color: var(--ink); border-color: var(--muted); background: var(--paper-raised); }
.theme-toggle.floating {
  position: fixed; left: 16px; right: auto; bottom: 16px; z-index: 80; box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
@media print { .theme-toggle { display: none; } }