/* ============================================================
   DripBack Design Tokens — WCAG-AA Contrast Layer (W1)
   ------------------------------------------------------------
   Single source of truth for brand colour pairs.
   CONVENTION: every BG x Text pair that the design pairs together
   reaches >= 4.5:1 (AA normal text). UI / large-text pairs reach
   >= 3.0:1. Each token documents its TARGET contrast as a comment.

   Verified by:  scripts/contrast_lint.py  (deterministic, exit 1 on FAIL)
   Brand source: web/assets/styles.css :root (Geist / blue-violet dark)
   Last update:  2026-06-03
   ============================================================ */

:root {
  /* --- SURFACES (dark, 3 steps) -----------------------------
     Darkest -> lightest. Text tokens below are tuned so that
     ink / ink-2 / ink-3 all clear AA on ALL THREE surfaces. */
  --t-bg:      #0A0A0B;  /* base page background                          */
  --t-raised:  #121214;  /* cards / raised panels  (vs ink   17.18:1 AA)  */
  --t-elev:    #1A1A1D;  /* elevated / overlay      (vs ink   15.95:1 AA) */

  /* --- TEXT / FOREGROUND (on any surface above) -------------
     ratios quoted against the LIGHTEST surface (--t-elev) =
     the worst case; on --t-bg they are even higher. */
  --t-ink:     #F5F5F7;  /* primary text   — on elev 15.95:1  (AA)        */
  --t-ink-2:   #A1A1AA;  /* secondary text — on elev  6.77:1  (AA)        */
  --t-ink-3:   #8A8A92;  /* muted text     — on elev  5.07:1  (AA)        */
  /* NOTE: #52525B (old muted) was 2.56:1 on bg = FAIL; do not reintroduce. */

  /* --- ACCENT (brand blue) ----------------------------------
     --t-accent is the brand hue, safe as ACCENT TEXT / LINK on
     dark surfaces (4.54:1 on bg = AA). For SOLID FILLS that carry
     text on top (buttons), use --t-accent-interactive which is one
     step deeper so white text clears AA.
     --t-accent was nudged #2B6FFF -> #3D7BFF so accent text clears AA on
     the LIGHTEST surface too (#2B6FFF was 4.30:1 on --t-raised = FAIL). */
  --t-accent:             #3D7BFF;  /* link / accent text — worst case on elev 4.53:1 (AA) */
  --t-accent-interactive: #2563EB;  /* button fill — white text  5.17:1 (AA);
                                       fill-on-bg 3.83:1 (AA UI/large)              */
  --t-accent-hover:       #1F5CD9;  /* button hover — white text 5.85:1 (AA)        */
  --t-accent-2:           #5635A8;  /* brand violet — gradient endpoint ONLY.
                                       NOT used as standalone text on bg (2.33:1). */

  /* --- FG-ON-ACCENT (auto black/white by accent luminance) ---
     For the interactive blue accent, WHITE wins (5.17:1 vs black 4.04:1),
     so the canonical fg-on-accent is white. Picked deterministically:
     whichever of #FFF/#000 yields the higher ratio on the fill colour. */
  --t-fg-on-accent:    #FFFFFF;  /* on --t-accent-interactive 5.17:1 (AA)        */
  --t-fg-on-accent-2:  #FFFFFF;  /* on --t-accent-2 (violet)  8.50:1 (AA)        */

  /* --- STATUS (each carries BLACK text per auto-luminance) --- */
  --t-signal:   #FFB020;  /* on bg 10.82:1; black-on-signal 11.48:1 (AA)   */
  --t-emerald:  #22C55E;  /* on bg  8.69:1; black-on-emerald  9.22:1 (AA)  */
  --t-danger:   #EF4444;  /* on bg  5.26:1; white-on-danger   3.76:1 (UI)  */
  --t-fg-on-signal:   #000000;  /* black on signal  11.48:1 (AA)           */
  --t-fg-on-emerald:  #000000;  /* black on emerald  9.22:1 (AA)           */
  --t-fg-on-danger:   #FFFFFF;  /* white on danger   3.76:1 (AA large/UI)  */

  /* --- BRIDGE: map legacy styles.css vars onto AA tokens -----
     Existing selectors reference --accent / --ink / --raised etc.
     Re-pointing them here upgrades the whole site (incl. generated
     pages) without touching every rule. styles.css :root still
     defines fallbacks for browsers that load it before tokens.css. */
  --bg:      var(--t-bg);
  --raised:  var(--t-raised);
  --elev:    var(--t-elev);
  --ink:     var(--t-ink);
  --ink-2:   var(--t-ink-2);
  --ink-3:   var(--t-ink-3);
  --accent:  var(--t-accent);
  --accent-2:var(--t-accent-2);
  --signal:  var(--t-signal);
  --emerald: var(--t-emerald);
  --danger:  var(--t-danger);
}
