/* Sacred HQ · app theme. Semantic tokens mapped from brand-tokens.css (Brand Kit v1.1).
   Components use these names only, never a hex.
   Dark is the default for everyone: its values sit in the bare :root. Light is a user setting (Settings › Appearance;
   approved by Will on 2026-10-18), so its values apply ONLY under :root[data-theme="light"]. Nothing in this file reads
   prefers-color-scheme: a device in light mode never switches the light theme on by itself. "Match device" is an
   opt-in choice, and the pre-paint script in index.html resolves it to data-theme="dark" | "light" before CSS paints.
   Light rules: Linen page, white cards, Void ink, secondary ink is Void at reduced opacity (no new hexes),
   hairline-on-linen, Crimson for fills and red text, Crimson Deep for pressed states and links, Gilt and Live only as
   marks with a word beside them, never as text. No glow, no gradients.
   tests/contrast.mjs parses this file: the first ":root {" block is dark, ':root[data-theme="light"]' is light, and it
   fails if prefers-color-scheme appears anywhere here. One declaration per line, values as kit vars, hex or rgba.
   No color-mix(): HQ's iOS floor is 16.4. */

:root {
  color-scheme: dark;

  /* grounds */
  --bg:            var(--void);        /* page */
  --surface:       var(--obsidian);    /* containers, cards, sheets, kanban cards */
  --surface-2:     var(--graphite);    /* inset on a surface: inputs, chips, age chips, notices */
  --raised:        var(--graphite);    /* lifted above its ground: menus, toasts, current nav item, selected segment */
  --hover:         rgba(237, 231, 218, 0.06);  /* hover and pressed wash on rows and quiet buttons (Linen at 6 %) */
  --strip-bg:      var(--graphite);    /* the "Design reference · example data" strip */
  --skeleton:      var(--graphite);    /* loading bars: flat, no shimmer */
  --chrome:        var(--chrome-bg);   /* translucent header and bottom bar; content scrolls beneath */
  --chrome-filter: var(--chrome-blur);
  --scrim:         rgba(10, 11, 16, 0.6);
  --shadow:        var(--shadow-float);  /* menus, sheets and toasts only */

  /* ink */
  --text:          var(--linen);       /* titles, row primary text, values */
  --text-2:        var(--linen-mute);  /* body copy, deck lines, row secondary lines */
  --text-3:        var(--linen-soft);  /* captions, labels, meta, placeholders */
  --line:          var(--hairline);        /* dividers and card edges: they divide, never decorate */
  --line-strong:   var(--hairline-strong); /* hover edge, secondary button edge, menu edge */
  --line-field:    rgba(237, 231, 218, 0.32); /* input edges */

  /* the one accent */
  --accent:        var(--crimson);       /* fills (primary button, breach age chip, capture button); marks (dash, tab underline) */
  --accent-hover:  var(--crimson-deep);  /* primary hover: Crimson Deep, as on light (Linen on the lighter recipe red is 4.38:1, under AA) */
  --accent-press:  var(--crimson-deep);  /* pressed fill, together with the 0.97 scale */
  --accent-text:   var(--crimson-bright);/* small red text. On dark ONLY on --bg (4.74:1); never on a card (4.40) */
  --accent-mark:   var(--crimson-bright);/* red icon, dot or large numeral on a card: a mark, not running text */
  --on-accent:     var(--linen);         /* label on a crimson fill: the kit's Linen-on-Crimson colorway (4.90:1) */
  --link:          var(--linen);         /* link text on dark is Linen ... */
  --link-line:     var(--crimson);       /* ... and the crimson underline is the cue (3.02 on Obsidian) */
  --danger-text:   var(--linen);         /* destructive label; on dark the crimson edge carries the warning */
  --on-gilt:       var(--void);          /* check glyph on a gilt fill. --live and --gilt are the kit tokens as-is */

  --focus:         var(--linen);
  --fw-body:       500;                  /* kit: body Medium on dark, Regular on Linen */

  /* charts (P1): grey steps with Crimson on the one highlighted series. Series differ by luminance (Linen at 100, 70
     and 45 percent) and direct labels, never by hue. Checked as mark pairs in tests/contrast-extra.json. */
  --chart-focal:   var(--accent-mark);   /* the one highlighted series, a gap or a stage that needs attention */
  --chart-1:       var(--linen);         /* first comparison series (100 %) */
  --chart-2:       rgba(237, 231, 218, 0.70);  /* second series (70 %) */
  --chart-3:       rgba(237, 231, 218, 0.45);  /* third series (45 %) */
  --chart-grid:    var(--line);
  --chart-track:   var(--surface-2);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:            var(--linen);
  --surface:       #FFFFFF;
  --surface-2:     var(--linen);
  --raised:        #FFFFFF;
  --hover:         rgba(10, 11, 16, 0.045);
  --strip-bg:      #FFFFFF;
  --skeleton:      rgba(10, 11, 16, 0.08);
  --chrome:        rgba(237, 231, 218, 0.82);
  --chrome-filter: var(--chrome-blur);
  --scrim:         rgba(10, 11, 16, 0.36);
  --shadow:        0 20px 60px rgba(10, 11, 16, 0.18);
  --text:          var(--void);
  --text-2:        rgba(10, 11, 16, 0.78);
  --text-3:        rgba(10, 11, 16, 0.64);
  --line:          var(--hairline-on-linen);
  --line-strong:   rgba(10, 11, 16, 0.34);
  --line-field:    rgba(10, 11, 16, 0.4);
  --accent:        var(--crimson);
  --accent-hover:  var(--crimson-deep);
  --accent-press:  var(--crimson-deep);
  --accent-text:   var(--crimson);
  --accent-mark:   var(--crimson);
  --on-accent:     #FFFFFF;
  --link:          var(--crimson-deep);
  --link-line:     var(--crimson-deep);
  --danger-text:   var(--crimson);
  --on-gilt:       var(--void);
  --focus:         var(--void);
  --fw-body:       400;

  --chart-focal:   var(--accent-mark);
  --chart-1:       var(--void);
  --chart-2:       rgba(10, 11, 16, 0.70);
  --chart-3:       rgba(10, 11, 16, 0.45);
  --chart-grid:    var(--line);
  --chart-track:   var(--surface-2);
}

/* More contrast: defined edges, stronger secondary ink. */
@media (prefers-contrast: more) {
  :root { --line: rgba(237, 231, 218, 0.5); --line-strong: rgba(237, 231, 218, 0.64); --line-field: rgba(237, 231, 218, 0.64); --text-3: var(--linen-mute); }
  :root[data-theme="light"] { --line: rgba(10, 11, 16, 0.5); --line-strong: rgba(10, 11, 16, 0.64); --line-field: rgba(10, 11, 16, 0.64); --text-2: rgba(10, 11, 16, 0.88); --text-3: rgba(10, 11, 16, 0.8); }
}
/* Reduced transparency: solid chrome, heavier scrim. */
@media (prefers-reduced-transparency: reduce) {
  :root { --chrome: var(--void); --chrome-filter: none; --scrim: rgba(10, 11, 16, 0.92); }
  :root[data-theme="light"] { --chrome: var(--linen); --chrome-filter: none; --scrim: rgba(10, 11, 16, 0.7); }
}

/* Logo colorways follow the resolved theme: Linen art on dark, Void art on light. Markup carries both files; exactly
   one shows (data-theme is always "dark" or "light" once the pre-paint script has run; without it, dark). */
.on-light { display: none !important; }
:root[data-theme="light"] .on-dark { display: none !important; }
:root[data-theme="light"] .on-light { display: block !important; }