/* ═══════════════════════════════════════════════════════════════════════════
   CRHQ legacy-token bridge
   ───────────────────────────────────────────────────────────────────────────
   Maps the pre-rebrand token names (--accent, --bg-void, --text-primary, …)
   onto the new semantic brand tokens defined in brand.css.

   Why this file exists: style.css, blog.css, docs.css, compare.css and
   releases.css contain ~3,400 lines written against the old names. Rewriting
   every reference in one pass would be a huge, un-reviewable diff with no
   safety net. Instead the old names survive as aliases pointing at the new
   mode-aware semantics, so the entire site inherits the rebrand and light/dark
   support at once, and individual stylesheets can migrate to --crhq-* names
   incrementally afterwards.

   Load order (required):  brand.css → bridge.css → style.css → page CSS

   Most aliases are defined ONCE, because the semantic tokens they point at are
   already redefined per mode inside brand.css. Only two things need per-mode
   literals:
     1. RGB triplets, because rgba() needs numbers, not a var() to a hex.
     2. Colours with no exact semantic equivalent (--border-visible, the
        functional accent set), which differ between the light and dark ramps.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── surfaces ─────────────────────────────────────────────────────────── */
  --bg-void:       var(--crhq-bg);
  --bg-surface:    var(--crhq-card);
  --bg-raised:     var(--crhq-card-subtle);
  --border-subtle: var(--crhq-border);

  /* ── text ─────────────────────────────────────────────────────────────── */
  --text-primary:   var(--crhq-text);
  --text-secondary: var(--crhq-text-soft);
  --text-muted:     var(--crhq-text-muted);

  /* ── action ───────────────────────────────────────────────────────────────
     LOCKED BRAND RULE (decision log, 2026-06-09): "fills are not text."
     --crhq-primary is the action/FILL colour. In dark mode it is #5B21B6,
     which is far too dark to sit as small text on a near-black page.

     So the bridge splits the old single --accent into two:
       --accent       fills, backgrounds, borders, SVG fills   (--crhq-primary)
       --accent-text  text, links, icon strokes, eyebrows      (--crhq-primary-text)

     The 41 `color: var(--accent)` declarations across the stylesheets were
     rewritten to --accent-text. Anything that paints a surface kept --accent.
     Do not "simplify" these back into one token: that reintroduces exactly the
     low-contrast failure the brand decision was written to prevent. */
  --accent:       var(--crhq-primary);
  --accent-text:  var(--crhq-primary-text);
  /* Text sitting ON a tinted brand chip (--accent-glow), not on the page.
     The tint lifts the background toward the brand hue, which eats contrast:
     cobalt on a 12% cobalt tint is 4.30:1, just under AA. One ramp step
     deeper restores it without changing the colour family. */
  --accent-on-tint: var(--crhq-primary-text);
  --accent-bright: var(--crhq-primary-soft);
  --accent-pale:   var(--crhq-primary-pale);
  --accent-glow:        rgba(var(--accent-rgb), 0.12);
  --accent-glow-strong: rgba(var(--accent-rgb), 0.30);

  /* ── type ─────────────────────────────────────────────────────────────────
     The brand runs one display/body face (Inter Tight) plus JetBrains Mono as
     the machine voice. Space Grotesk is retired. --font-body and --font-display
     therefore resolve to the same family; both names are kept so existing rules
     keep expressing intent. */
  --font-display: var(--crhq-font-display);
  --font-body:    var(--crhq-font-display);
  --font-mono:    var(--crhq-font-mono);

  /* ── geometry ─────────────────────────────────────────────────────────── */
  --radius-sm: var(--crhq-radius-sm);
  --radius-md: var(--crhq-radius);
  --radius-lg: var(--crhq-radius-lg);
  --max-width: 1200px;   /* layout, not brand: unchanged */
}

/* ── LIGHT ─────────────────────────────────────────────────────────────────
   Navy / cobalt identity on white. */
:root,
[data-crhq-mode="light"],
.crhq-theme-light {
  --accent-hover:   var(--crhq-cobalt-deep);
  --accent-on-tint: var(--crhq-cobalt-deep);   /* 6.10:1 on the tint */
  --border-visible: #CFD6E2;

  /* functional accents: the light-mode set */
  --green:         var(--crhq-success);
  --amber:         var(--crhq-warning);
  --red:           var(--crhq-danger);
  --blue:          var(--crhq-cobalt);
  --text-terminal: var(--crhq-success-text);
  --green-text:    var(--crhq-success-text);
  --green-dim:     rgba(var(--green-rgb), 0.5);

  /* RGB triplets — literals, because rgba() cannot consume a var() to a hex */
  --accent-rgb:        53, 103, 224;   /* #3567E0 cobalt   */
  --bg-void-rgb:      255, 255, 255;   /* #FFFFFF surface  */
  --text-primary-rgb:  21,  23,  26;   /* #15171A ink      */
  --green-rgb:         22, 163,  74;   /* #16A34A          */
  --amber-rgb:        168,  90,  44;   /* #A85A2C          */
  --red-rgb:          194,  65,  12;   /* #C2410C          */
  --blue-rgb:          53, 103, 224;   /* #3567E0          */
  --text-terminal-rgb: 22, 163,  74;   /* #16A34A          */
}

/* ── DARK (site default) ───────────────────────────────────────────────────
   Option C violet on black-violet. Accents use the *-dark lifts, never the
   light-mode values, which fail contrast on a near-black page. */
[data-crhq-mode="dark"],
.crhq-theme-dark {
  --accent-hover:   var(--crhq-violet-bright);
  /* MUST be restated here. The light block above is selectored `:root, [light]`
     so it also matches in dark mode; anything it sets and this block does not
     override leaks into dark. Leaving this out painted chip text cobalt-deep
     (#2D4EBD) on a near-black page. */
  --accent-on-tint: var(--crhq-primary-text);
  --border-visible: #3B2A4E;

  --green:         var(--crhq-acc-green-dark);
  --amber:         var(--crhq-acc-amber-dark);
  --red:           var(--crhq-danger-dark);
  --blue:          var(--crhq-acc-cyan-dark);
  --text-terminal: var(--crhq-acc-green-dark);
  --green-text:    var(--crhq-acc-green-dark);
  --green-dim:     rgba(var(--green-rgb), 0.5);

  /* --accent-rgb intentionally equals --crhq-glow-rgb: the brand defines that
     value as the violet used for every decorative glow on dark surfaces. */
  --accent-rgb:        91,  33, 182;   /* #5B21B6 violet   */
  --bg-void-rgb:        7,   7,  11;   /* #07070B page     */
  --text-primary-rgb: 247, 242, 255;   /* #F7F2FF ink      */
  --green-rgb:         84, 211, 138;   /* #54D38A          */
  --amber-rgb:        216, 154,  86;   /* #D89A56          */
  --red-rgb:          255, 122, 122;   /* #FF7A7A          */
  --blue-rgb:         115, 217, 230;   /* #73D9E6          */
  --text-terminal-rgb: 84, 211, 138;   /* #54D38A          */
}

/* ── mode transition ──────────────────────────────────────────────────────
   Only the properties that actually change, so toggling does not trigger a
   full-page repaint animation on every element. Honoured only when the user
   has not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html.crhq-mode-ready body,
  html.crhq-mode-ready .site-header,
  html.crhq-mode-ready footer {
    transition: background-color 0.25s var(--crhq-ease),
                color 0.25s var(--crhq-ease),
                border-color 0.25s var(--crhq-ease);
  }
}