/*
 * IVW-019 light theme tokens.
 *
 * Loaded on every page immediately after shared/styles/tokens.css and
 * before base.css. Two blocks:
 *
 *   1. `:root` declares the handful of tokens this ticket introduces
 *      (`--brand-text`, `--brand-text-hot`, `--on-brand`, `--on-ember`,
 *      `--grid-line`, the code pane surfaces) with their DARK defaults,
 *      each derived from an existing tokens.css value so the dark look
 *      does not change. They live here rather than in tokens.css because
 *      tokens.css is IVW-003's file; folding these defaults into it is
 *      recorded as an IVW-003 follow-up in TOKENS.md section 6.
 *   2. `:root[data-theme="light"]` overrides the neutral scale, the
 *      text-safe accents and the shadow tokens for a white page.
 *      tools/build.sh stamps `data-theme` on <html> from the variant's
 *      variant.json `theme` field ("dark" is the default).
 *
 * Every text pair below is contrast-checked in TOKENS.md section 6 with
 * the WCAG 2.1 formula. The one rule to remember: on a light surface,
 * orange text under 24px uses `--brand-text`, never `--brand`. `--brand`
 * (#FF8B00) stays the fill, rule, icon and glow colour on both themes;
 * on white it reaches only 2.35:1 as text.
 */

:root {
  color-scheme: dark;

  /* Orange as text. On dark, brand orange already clears AA (8.43:1 on
   * --bg-0), so the text token is the brand itself; the light block
   * replaces it with a darker orange. */
  --brand-text: var(--brand);
  --brand-text-rgb: var(--brand-rgb);
  --brand-text-hot: var(--brand-hot);

  /* Text set on a --brand or --brand-hot fill (filled CTAs). */
  --on-brand: var(--bg-0);

  /* Text set on a --brand-ember fill (the CTA band). */
  --on-ember: var(--fg);

  /* Graph-paper overlay line colour (the dossier grid the founder kept). */
  --grid-line: rgba(var(--fg-rgb), 0.035);

  /* Code and diagnostic pane surfaces. The border is transparent on dark
   * so the existing pane look is unchanged; light gives it an edge. */
  --code-bg: var(--bg-2);
  --code-header-bg: var(--bg-1);
  --code-border: transparent;
}

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

  /* Neutral scale, lightest to darkest. */
  --bg-0: #FFFFFF;
  --bg-0-rgb: 255, 255, 255;
  --bg-1: #F6F7F9;
  --bg-1-rgb: 246, 247, 249;
  --bg-2: #EEF0F3;
  --bg-2-rgb: 238, 240, 243;
  --bg-3: #E3E6EA;
  --bg-3-rgb: 227, 230, 234;
  --fg: #111111;
  --fg-rgb: 17, 17, 17;
  --muted: #5B6572;
  --muted-rgb: 91, 101, 114;

  /* Brand orange stays #FF8B00 for fills, rules, icons and glows.
   * --brand-text is the same 30 degree hue shaded until it clears 4.5:1
   * on every light surface: 5.88:1 on --bg-0, 5.48:1 on --bg-1, 5.15:1
   * on --bg-2, 4.70:1 on --bg-3. (#A35200 was the candidate named in
   * review; it passes --bg-0 and --bg-1 but reaches only 4.46:1 on
   * --bg-3, so the shade below is used instead.) */
  --brand-text: #9E4F00;
  --brand-text-rgb: 158, 79, 0;
  --brand-text-hot: #7A3D00;

  /* Text on orange fills: near-black, 8.04:1 on --brand, 9.74:1 on
   * --brand-hot. White on --brand would be 2.35:1. */
  --on-brand: #111111;

  /* Text on the ember band: white reaches 4.60:1 on --brand-ember
   * (#B85C00); --fg (#111111) would reach only 4.11:1 there. */
  --on-ember: #FFFFFF;

  /* Proof blue and threat red-orange, re-derived as text-safe shades at
   * the same hues (213 and 9 degrees): 6.68:1 and 5.91:1 on --bg-0. */
  --proof: #0057C2;
  --proof-rgb: 0, 87, 194;
  --threat: #BF2A10;
  --threat-rgb: 191, 42, 16;

  /* Grid overlay: the dark alpha would vanish on white. */
  --grid-line: rgba(var(--fg-rgb), 0.07);

  /* Code and diagnostic panes: one step below the page with a visible
   * edge, so a pane on a --bg-1 card still reads as a pane. */
  --code-bg: #EEF0F3;
  --code-header-bg: #E3E6EA;
  --code-border: #D9DEE4;

  /* Shadows that read on white. tokens.css's --glow-static carries a
   * drop shadow tinted with --bg-0-rgb, which on a white page is a
   * white shadow on white; this replaces it with a near-black shadow
   * at low alpha and a fainter orange ring. --glow (the animated hover
   * ring) keeps its tokens.css definition: an orange ring reads on
   * white without change. */
  --glow-static: 0 2px 12px rgba(var(--fg-rgb), 0.10),
    0 0 var(--glow-spread) rgba(var(--glow-color-rgb), 0.18);
}