/* ── Shared theme tokens ───────────────────────────────────────────────
 *
 * One source of truth for both palettes. The pages do NOT use these names
 * directly in their rules — each page keeps its own local aliases
 * (--navy, --gold, --text, ...) and re-points them at the tokens here.
 *
 * That indirection is deliberate. The portal and the report resolve the
 * same local name to different values (see the note above openDocument()
 * in the portal), which is why the report is embedded in an iframe rather
 * than inlined. Sharing raw names across the two documents would break
 * whichever loaded second; sharing a *palette* underneath them does not.
 *
 * The dark values below are the portal's existing colours, unchanged, and
 * the light values are the report's. Neither page shifts in the theme it
 * already shipped with — the new work is the opposite theme for each.
 *
 * Read by: every page, plus public/bg-gears.js, which pulls the --gear-*
 * tokens through getComputedStyle because canvas cannot resolve var().
 */

:root {
  color-scheme: light;

  /* ── Brand — identical in both themes ─────────────────────────── */
  --brand-navy:     #0B1E3F;
  --brand-navy-2:   #142C5A;
  --brand-gold:     #f5b800;
  /* The legible foreground ON a gold fill. Settles a three-way fork: the
     report used #fff (about 1.9:1 — a WCAG failure on the primary submit
     button), while the portal and the setup page used #3a2c00 and #0B1E3F. */
  --brand-gold-ink: #3a2c00;

  /* Brand gold as *text* is unreadable on a light surface (~1.7:1), so the
     accent ink is a deep bronze in light and the gold itself in dark.
     Anything that paints gold as a fill keeps --brand-gold instead. */
  --accent-ink: #7a5a00;
  --accent:     #0E7490;
  --accent-2:   #0891B2;

  /* ── Surfaces ─────────────────────────────────────────────────── */
  --srf-app:      #F8FAFC;
  --srf-app-grad: linear-gradient(145deg,#FBFCFE 0%,#EDF1F7 55%,#F7F9FC 100%);
  --srf-chrome:   rgba(255,255,255,0.94);   /* fixed header bars */
  --srf-panel:    rgba(255,255,255,0.88);   /* nav rails, toolbars */
  --srf-panel-2:  rgba(255,255,255,0.92);
  --srf-overlay:  #FFFFFF;                  /* solid full-cover panels */
  --srf-1:        #FFFFFF;                  /* cards, inputs */
  --srf-2:        #F1F5F9;                  /* recessed / readonly */
  --srf-card:     rgba(255,255,255,0.78);   /* translucent portal card */
  --srf-card-ho:  rgba(245,184,0,0.10);
  --srf-raised:   rgba(11,30,63,0.045);     /* raised small controls */
  --hover-1:      rgba(11,30,63,0.055);
  --hover-2:      rgba(11,30,63,0.095);
  --gold-dim:     rgba(245,184,0,0.16);
  --gold-med:     rgba(245,184,0,0.30);

  /* ── Ink ──────────────────────────────────────────────────────── */
  --ink-1: #0F172A;
  --ink-2: #475569;
  --ink-3: #6B7F99;

  /* ── Lines ────────────────────────────────────────────────────── */
  --line-1: rgba(11,30,63,0.17);
  --line-2: rgba(11,30,63,0.10);

  /* ── Status ───────────────────────────────────────────────────── */
  --ok:    #16A34A;  --ok-bg:   #F0FDF4;  --ok-line:   #BBF7D0;
  --bad:   #DC2626;  --bad-bg:  #FEF2F2;  --bad-line:  #FECACA;
  --warn:  #D97706;  --warn-bg: #FFFBEB;  --warn-line: #FDE68A;
  --info:  #0E7490;  --info-bg: #ECFEFF;  --info-line: #A5F3FC;

  /* The filled traffic-light scale the report paints onto <select>s, wear
     chips, priority pills and the follow-up toggles. Four independent
     copies of it existed; this is the one. */
  --ok-soft-bg:   #dcfce7;  --ok-soft-ink:   #166534;
  --bad-soft-bg:  #fee2e2;  --bad-soft-ink:  #991b1b;
  --warn-soft-bg: #fff7ed;  --warn-soft-ink: #c2410c;
  --note-soft-bg: #fef9c3;  --note-soft-ink: #713f12;
  --high-soft-bg: #fed7aa;  --high-soft-ink: #9a3412;
  --sel-soft-bg:  #EFF6FF;  --sel-soft-ink:  #1E40AF;

  /* Section headers and headings. The report paints solid navy bars with
     white text; in dark that navy has to lift off the page to stay a bar,
     and navy-as-heading-text has to become a light ink. */
  --head-fill:   #0B1E3F;
  --head-fill-2: #142C5A;
  --head-ink:    #FFFFFF;
  --heading-ink: #0B1E3F;
  --gold-bg:     #fff8cc;

  /* ── Geometry, depth, focus ───────────────────────────────────── */
  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.05);
  --shadow-md: 0 4px 12px rgba(15,23,42,0.07), 0 2px 4px rgba(15,23,42,0.05);
  --shadow-lg: 0 20px 60px rgba(15,23,42,0.16);
  /* A real focus indicator. The report sets outline:none on every control
     and the portal declares no :focus rule at all, so without this a
     keyboard user has nothing to follow in either theme. */
  --focus-ring: 0 0 0 3px rgba(14,116,144,0.45);

  /* ── Animated gear field (public/bg-gears.js) ─────────────────── */
  --gear-face-0: #dfe6f0;  --gear-face-1: #ccd7e7;
  --gear-face-2: #bac8dd;  --gear-face-3: #aab9d1;
  --gear-hub-0:  #f0f4fa;  --gear-hub-1:  #cfd9e9;  --gear-hub-2: #a3b4cd;
  --gear-side:   #94a6bf;  --gear-side-lit: #bcc9dd;
  --gear-tooth-line: rgba(11,30,63,0.14);
  --gear-rim-rgb:    176,130,0;      /* bronze rims read on a light field */
  --gear-detail-rgb: 100,120,150;
  --gear-spark-rgb:  90,110,140;
  --gear-glow-warm:  rgba(214,160,20,0.10);
  --gear-glow-rgb:   190,140,0;
  --track:      rgba(11,30,63,0.06);
  --shimmer-hi: #a8842a;
  --vignette: radial-gradient(ellipse at 50% 40%, transparent 42%, rgba(11,30,63,0.10) 100%);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --accent-ink: #f5b800;
  --accent:     #f5b800;
  --accent-2:   #ffc82e;

  --srf-app:      #0B1E3F;
  --srf-app-grad: linear-gradient(145deg,#040e1f 0%,#0B1E3F 55%,#061225 100%);
  --srf-chrome:   rgba(4,12,28,0.96);
  --srf-panel:    rgba(4,10,24,0.82);
  --srf-panel-2:  rgba(4,10,24,0.90);
  --srf-overlay:  #040e1f;
  --srf-1:        #0a1730;
  --srf-2:        rgba(4,10,24,0.60);
  --srf-card:     rgba(255,255,255,0.04);
  --srf-card-ho:  rgba(245,184,0,0.07);
  --srf-raised:   rgba(255,255,255,0.05);
  --hover-1:      rgba(255,255,255,0.05);
  --hover-2:      rgba(255,255,255,0.09);
  --gold-dim:     rgba(245,184,0,0.10);
  --gold-med:     rgba(245,184,0,0.20);

  --ink-1: #e8edf4;
  --ink-2: #8fa3bf;
  --ink-3: #4d6580;

  --line-1: rgba(245,184,0,0.14);
  --line-2: rgba(255,255,255,0.07);

  --ok:   #22c55e;  --ok-bg:   rgba(34,197,94,0.10);   --ok-line:   rgba(34,197,94,0.38);
  --bad:  #f87171;  --bad-bg:  rgba(248,113,113,0.10); --bad-line:  rgba(248,113,113,0.38);
  --warn: #f59e0b;  --warn-bg: rgba(245,158,11,0.10);  --warn-line: rgba(245,158,11,0.38);
  --info: #38bdf8;  --info-bg: rgba(56,189,248,0.10);  --info-line: rgba(56,189,248,0.38);

  /* Same scale, inverted: a tinted wash carrying a light ink. Kept at a
     high enough alpha that a filled <select> still reads as filled — the
     pass/fail state is carried by colour alone in this form. */
  --ok-soft-bg:   rgba(34,197,94,0.20);   --ok-soft-ink:   #86efac;
  --bad-soft-bg:  rgba(248,113,113,0.20); --bad-soft-ink:  #fca5a5;
  --warn-soft-bg: rgba(249,115,22,0.20);  --warn-soft-ink: #fdba74;
  --note-soft-bg: rgba(234,179,8,0.20);   --note-soft-ink: #fde047;
  --high-soft-bg: rgba(249,115,22,0.28);  --high-soft-ink: #fdba74;
  --sel-soft-bg:  rgba(96,165,250,0.16);  --sel-soft-ink:  #93c5fd;

  --head-fill:   #16305c;
  --head-fill-2: #1d3d70;
  --head-ink:    #FFFFFF;
  --heading-ink: #e8edf4;
  --gold-bg:     rgba(245,184,0,0.16);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.45);
  --focus-ring: 0 0 0 3px rgba(245,184,0,0.55);

  --gear-face-0: #16283f;  --gear-face-1: #1d3350;
  --gear-face-2: #132339;  --gear-face-3: #0d1a2c;
  --gear-hub-0:  #25405f;  --gear-hub-1:  #16283f;  --gear-hub-2: #0a1524;
  --gear-side:   #060e1c;  --gear-side-lit: #0d1b30;
  --gear-tooth-line: rgba(4,10,20,0.55);
  --gear-rim-rgb:    245,184,0;
  --gear-detail-rgb: 140,175,215;
  --gear-spark-rgb:  226,236,250;
  --gear-glow-warm:  rgba(255,214,120,0.075);
  --gear-glow-rgb:   245,184,0;
  --track:      rgba(0,0,0,0.22);
  --shimmer-hi: #fff3c4;
  --vignette: radial-gradient(ellipse at 50% 40%, transparent 42%, rgba(3,9,20,0.55) 100%);
}

/* ── Theme toggle ──────────────────────────────────────────────────────
   Rendered by public/theme.js. Sized to the 44px touch minimum the rest of
   the app aims for — this is a tablet app operated in gloves underground.
   Host pages can retune it through the --tt-* hooks without restyling it. */
.theme-toggle {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--tt-line, var(--line-2));
  border-radius: 10px;
  background: transparent;
  /* --ink-2, not --ink-3: the dimmest ink is tuned for text that sits next
     to a label, and an 18px bare glyph needs more than that to stay findable. */
  color: var(--tt-ink, var(--ink-2));
  cursor: pointer;
  font-family: inherit;
  transition: color .16s, border-color .16s, background .16s;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover {
  color: var(--tt-ink-ho, var(--accent-ink));
  border-color: var(--tt-line-ho, var(--line-1));
  background: var(--tt-bg-ho, var(--hover-1));
}
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: transparent;
}
.theme-toggle svg { display: block; width: 18px; height: 18px; }
/* One icon per theme, and it names the theme you are *in* rather than the
   one you would get — the label carries the promise, the icon carries the
   state. Both are swapped together by theme.js. */
.theme-toggle .tt-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .tt-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .tt-moon { display: none; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}