/* ── Theme overrides that must win, loaded LAST on every surface ───────────────
   HISTORY: this file used to carry the entire dark palette. It no longer does.
   `public/css/backbone.css` now declares BOTH themes (dark in `:root`, the light
   variant in `:root[data-theme="light"]` plus an OS fallback) and is linked
   immediately BEFORE this file on every page. Backbone is the token authority;
   this file is only the two things that have to outrank it.

   Load order on every page is therefore:
       <owning stylesheet>.css   → its own legacy light palette + components
       backbone.css              → re-values every token, both themes, + primitives
       theme.css                 → the overrides below

   Two activation paths for the theme, deliberately, and note that DARK is now
   the default:
       :root[data-theme="dark"|"light"]                  the explicit choice (theme.js)
       @media (prefers-color-scheme: light) :root:not([data-theme="dark"])
                                                         the no-JS / pre-boot fallback
   The `:not([data-theme="dark"])` is what makes an explicit DARK choice beat an
   OS light preference.

   Section 1 keeps high-contrast mode ahead of Backbone; section 2 is the short,
   shrinking list of hard-coded literals in stylesheets this file does not own.
   ------------------------------------------------------------------------- */

/* ══ 1. High contrast must still beat Backbone ═════════════════════════════
   styles.css maps the --hc-* bundle onto the core tokens at
   `:root[data-a11y-contrast="high"]` and at
   `@media (prefers-contrast: more) :root:not([data-a11y-contrast])`. Those
   selectors are (0,2,0) and load BEFORE backbone.css, so backbone's own
   (0,2,0) light block would silently downgrade high-contrast mode back to the
   ordinary palette. These re-assertions load after backbone and restore it.

   Each declaration reads the --hc-* token with an HC literal as its fallback,
   so the rules are also correct on surfaces that never defined the bundle
   (admin, platform, my, marketing). Grain is switched off in both: texture over
   a maximum-contrast surface is exactly the noise this mode exists to remove.
   ------------------------------------------------------------------------- */

/* -- high contrast on the DARK theme -------------------------------------- */
:root[data-a11y-contrast="high"]:not([data-theme="light"]) {
  --text: var(--hc-text, #ffffff);               --text-muted: var(--hc-text-muted, #e4f4fa);
  --muted: var(--hc-text-muted, #e4f4fa);        --faint: var(--hc-text-muted, #e4f4fa);
  --border: var(--hc-border, #8fb9c8);           --control-border: var(--hc-border, #b7dbe6);
  --bg: var(--hc-bg, #000000);                   --paper: var(--hc-bg, #000000);
  --surface: var(--hc-surface, #04121a);         --surface2: var(--hc-surface2, #0b2531);
  --surface-2: var(--hc-surface2, #0b2531);      --paper-2: var(--hc-surface2, #0b2531);
  --ink: var(--hc-text, #ffffff);                --ink-soft: var(--hc-text-muted, #e4f4fa);
  --line: var(--hc-border, #8fb9c8);             --line-hi: var(--hc-border, #b7dbe6);
  --line-strong: var(--hc-border, #b7dbe6);      --muted-2: var(--hc-text-muted, #e4f4fa);
  --slab: #000000;                               --slab-hi: #000000;
  --sig: #8ff6fa;                                --sig-text: #8ff6fa;
  --sig-ink: #000000;                            --grain-opacity: 0;
  --deep-0: #000000;                             --deep-1: #000000;
  --deep-2: #04121a;                             --deep-3: #04121a;
  --mid-1: #0b2531;                              --mid-2: #0b2531;
  --bot-bubble: var(--hc-bot-bubble, #04121a);   --user-bubble: var(--hc-user-bubble, #0e2c46);
  --hl-keyword: var(--hc-hl-keyword, #b8e4ff);   --hl-string: var(--hc-hl-string, #b5e88a);
  --hl-number: var(--hc-hl-number, #ffc078);     --hl-comment: var(--hc-hl-comment, #c6d6de);
  --hl-function: var(--hc-hl-function, #8ff6fa); --hl-tag: var(--hc-hl-tag, #ff9aa2);
  --hl-attr: var(--hc-hl-attr, #f2d98c);         --hl-punct: var(--hc-hl-punct, #d3e2e8);
}

/* -- high contrast on the LIGHT theme ------------------------------------- */
:root[data-theme="light"][data-a11y-contrast="high"] {
  --text: #000000;               --text-muted: #10333d;
  --muted: #10333d;              --faint: #10333d;
  --border: #234a56;             --control-border: #10333d;
  --bg: #ffffff;                 --paper: #ffffff;
  --surface: #ffffff;            --surface2: #eef6f9;
  --surface-2: #eef6f9;          --paper-2: #eef6f9;
  --ink: #000000;                --ink-soft: #10333d;
  --line: #234a56;               --line-hi: #10333d;
  --line-strong: #10333d;        --muted-2: #10333d;
  --slab: #ffffff;               --slab-hi: #ffffff;
  --sig: #033a45;                --sig-text: #033a45;
  --sig-ink: #ffffff;            --grain-opacity: 0;
  --deep-0: #ffffff;             --deep-1: #ffffff;
  --deep-2: #f4fafc;             --deep-3: #eef6f9;
  --mid-1: #eef6f9;              --mid-2: #eef6f9;
  --bot-bubble: #ffffff;         --user-bubble: #eef6f9;
  --hl-keyword: #0a2f6b;         --hl-string: #0b4a2c;
  --hl-number: #5c3a04;          --hl-comment: #10333d;
  --hl-function: #033a45;        --hl-tag: #7d1b25;
  --hl-attr: #4d3609;            --hl-punct: #10333d;
}

/* The same two, for the no-JS branch where data-a11y-contrast is never set. */
@media (prefers-contrast: more) {
  :root:not([data-theme="light"]):not([data-a11y-contrast]) {
    --text: var(--hc-text, #ffffff);               --text-muted: var(--hc-text-muted, #e4f4fa);
    --muted: var(--hc-text-muted, #e4f4fa);        --faint: var(--hc-text-muted, #e4f4fa);
    --border: var(--hc-border, #8fb9c8);           --control-border: var(--hc-border, #b7dbe6);
    --bg: var(--hc-bg, #000000);                   --paper: var(--hc-bg, #000000);
    --surface: var(--hc-surface, #04121a);         --surface2: var(--hc-surface2, #0b2531);
    --surface-2: var(--hc-surface2, #0b2531);      --paper-2: var(--hc-surface2, #0b2531);
    --ink: var(--hc-text, #ffffff);                --ink-soft: var(--hc-text-muted, #e4f4fa);
    --line: var(--hc-border, #8fb9c8);             --line-hi: var(--hc-border, #b7dbe6);
    --line-strong: var(--hc-border, #b7dbe6);      --muted-2: var(--hc-text-muted, #e4f4fa);
    --slab: #000000;                               --slab-hi: #000000;
    --sig: #8ff6fa;                                --sig-text: #8ff6fa;
    --sig-ink: #000000;                            --grain-opacity: 0;
    --deep-0: #000000;                             --deep-1: #000000;
    --deep-2: #04121a;                             --deep-3: #04121a;
    --mid-1: #0b2531;                              --mid-2: #0b2531;
    --bot-bubble: var(--hc-bot-bubble, #04121a);   --user-bubble: var(--hc-user-bubble, #0e2c46);
    --hl-keyword: var(--hc-hl-keyword, #b8e4ff);   --hl-string: var(--hc-hl-string, #b5e88a);
    --hl-number: var(--hc-hl-number, #ffc078);     --hl-comment: var(--hc-hl-comment, #c6d6de);
    --hl-function: var(--hc-hl-function, #8ff6fa); --hl-tag: var(--hc-hl-tag, #ff9aa2);
    --hl-attr: var(--hc-hl-attr, #f2d98c);         --hl-punct: var(--hc-hl-punct, #d3e2e8);
  }
  :root[data-theme="light"]:not([data-a11y-contrast]) {
    --text: #000000;               --text-muted: #10333d;
    --muted: #10333d;              --faint: #10333d;
    --border: #234a56;             --control-border: #10333d;
    --bg: #ffffff;                 --paper: #ffffff;
    --surface: #ffffff;            --surface2: #eef6f9;
    --surface-2: #eef6f9;          --paper-2: #eef6f9;
    --ink: #000000;                --ink-soft: #10333d;
    --line: #234a56;               --line-hi: #10333d;
    --line-strong: #10333d;        --muted-2: #10333d;
    --slab: #ffffff;               --slab-hi: #ffffff;
    --sig: #033a45;                --sig-text: #033a45;
    --sig-ink: #ffffff;            --grain-opacity: 0;
    --deep-0: #ffffff;             --deep-1: #ffffff;
    --deep-2: #f4fafc;             --deep-3: #eef6f9;
    --mid-1: #eef6f9;              --mid-2: #eef6f9;
    --bot-bubble: #ffffff;         --user-bubble: #eef6f9;
    --hl-keyword: #0a2f6b;         --hl-string: #0b4a2c;
    --hl-number: #5c3a04;          --hl-comment: #10333d;
    --hl-function: #033a45;        --hl-tag: #7d1b25;
    --hl-attr: #4d3609;            --hl-punct: #10333d;
  }
}

/* ══ 2. Unavoidable hard-coded literals ════════════════════════════════════
   Selectors whose value is a bare hex in a stylesheet this file does not own.
   Each is the narrowest selector that fixes it, and each class name was
   verified unique to its own surface (`.topbar` → my.css, `.demo`/`.dark` →
   home.css, `.auth-card` → auth.css), so none can reach across into another app.

   A rule here is a confession that the owning stylesheet hard-codes a colour.
   The right fix is to tokenise it there and delete the entry; three have already
   graduated out this way (`.badge-ungrounded`, `.msg.bot .bubble img`, and the
   dark `--accent-text` mix). Do not reintroduce a `background` SHORTHAND patch:
   at (0,5,1) it outranks component rules and silently wipes their
   `background-image` layers.

   These fire when the DARK theme is active, which under Backbone is the
   default. "Dark is active" means an explicit dark choice, OR no explicit
   choice while the OS is not asking for light.
   ------------------------------------------------------------------------- */

/* home.css:48 — the skip link is `background: var(--ink); color: #fff`. Ink and
   paper swap roles in dark, so white text lands on a near-white pill and
   vanishes. Keyboard-only a11y path. */
:root[data-theme="dark"] .skip { color: var(--paper); }

/* home.css:106,149 — the hero demo card and the "try it" band paint themselves
   with var(--ink) and then put HARD-CODED light text (#eef1f6 / #e7ebf2 / #fff)
   on it. Inverting --ink turns both into light-on-light. They are meant to read
   as a dark product screenshot, so keep them dark. */
:root[data-theme="dark"] .demo,
:root[data-theme="dark"] .dark { background: var(--paper-2); }

/* b.css:71 — the review avatar is `color: #fff` on `background: var(--verified)`,
   and the dark verified signal (#5ce1e6) is a LIGHT fill: white on it is ~1.3:1.
   Dark ink on it is ~10:1. */
:root[data-theme="dark"] .review-avatar { color: var(--sig-ink, #04202a); }

/* GRADUATED 2026-07-28, do not reintroduce:
     `.topbar`    — my.css no longer hard-codes rgba(255,255,255,.75); the bar is
                    color-mix(in srgb, var(--deep-0) 80%, transparent) with a
                    prefers-reduced-transparency fallback.
     `.auth-card` — the white inset bevel is gone; the card is var(--shadow-card).
   Both stylesheets now use tokens, which is the fix this list exists to make
   unnecessary. */

/* styles.css:1955 — .recent-bot-mark is `color: #fff` on `background: var(--accent)`.
   app.js already computes the WCAG-correct foreground into --accent-fg; use it,
   keeping #fff as the fallback for pages that do not set it. */
:root[data-theme="dark"] .recent-bot-mark { color: var(--accent-fg, #fff); }

/* The same six for the default branch: no explicit choice, OS not asking for
   light. Written as `not (prefers-color-scheme: light)` rather than
   `(prefers-color-scheme: dark)` so that "no preference" also counts as dark,
   which is what makes dark the default. */
@media not (prefers-color-scheme: light) {
  :root:not([data-theme="light"]) .skip { color: var(--paper); }
  :root:not([data-theme="light"]) .demo,
  :root:not([data-theme="light"]) .dark { background: var(--paper-2); }
  :root:not([data-theme="light"]) .review-avatar { color: var(--sig-ink, #04202a); }
  :root:not([data-theme="light"]) .recent-bot-mark { color: var(--accent-fg, #fff); }
}