/*
 * 806ai.ai — Design Tokens (Slice 0: Foundation & Baseline)
 * ──────────────────────────────────────────────────────────
 * Single source of truth for color, spacing, radius and z-index primitives.
 *
 * How this file relates to index.html's inline :root block:
 *   The brand values (--paper, --card, --edge, --text, --red, --red-hot,
 *   --amber, --dev*, --r-sm/md/lg, --mono/--sans/--display, --ease/--spring)
 *   already live inline in index.html and are NOT duplicated here. This
 *   file aliases them into semantic names via var(--legacy, fallback), so
 *   there is exactly one place that owns each literal value. Pages that
 *   don't carry the inline block (e.g. a bare landing page) still get
 *   correct output from the fallback values below.
 *
 * This file changes nothing visually on its own — nothing in production
 * markup references these names yet. It exists so Slice 1+ components can
 * be built against semantic tokens instead of hardcoded colors, and so a
 * future rebrand or dark-mode pass only has to change values in one place.
 *
 * Ratio target for the next visual pass (not enforced by this file):
 * ~85% neutral / 10% structural gray / 5% signal color (primary/accent).
 */

:root{
  /* ── Surfaces (light / editorial) ───────────────────────────── */
  --color-background:        var(--paper, #ffffff);
  --color-foreground:        var(--text, #0b0b0b);
  --color-surface:           var(--card, #ffffff);
  --color-surface-elevated:  var(--card, #ffffff); /* pair with --shadow-elevated */
  --color-surface-subtle:    #f5f5f5; /* matches the .cell/.take hover fill already in use */

  --color-border:            var(--edge, #e5e5e5);
  --color-border-strong:     var(--edge2, #d4d4d4);

  --color-muted:             var(--color-surface-subtle);
  --color-muted-foreground:  var(--dim, #525252);
  --color-faint-foreground:  var(--faint, #656565); /* third text tier already used in production */

  /* ── Brand / signal ──────────────────────────────────────────── */
  --color-primary:            var(--red, #E10600);
  --color-primary-foreground: #ffffff;
  --color-accent:             var(--red-hot, #FF2A1E);
  --color-accent-foreground:  #ffffff;

  /* Status colors. `warning` maps to the amber pole already established in
     production (kept deliberately distinct from primary — see the comment
     on --amber in index.html: red means "act", amber means "caution").
     `success`, `destructive` and `info` are new — nothing in production
     uses them yet, so introducing them here changes nothing today. */
  --color-success:             #1a7f37;
  --color-success-foreground:  #ffffff;
  --color-warning:             var(--amber, #B4700E);
  --color-warning-foreground:  #1a1200;
  --color-destructive:         #D92D20;
  --color-destructive-foreground: #ffffff;
  --color-info:                #2563eb;
  --color-info-foreground:     #ffffff;

  /* ── Inverse / "device" surfaces ─────────────────────────────
     806ai.ai isn't a light/dark theme toggle — it's a fixed dual-tone
     system: a white editorial reading surface plus a permanent-dark
     "device" chrome (topbar, Ask console, dock, footer, verdict blocks).
     These tokens name that second surface so future components can adopt
     it deliberately instead of re-deriving near-black colors ad hoc. */
  --color-surface-inverse:            var(--dev, #0a0a0a);
  --color-surface-inverse-elevated:   var(--dev-panel, #121212);
  --color-border-inverse:             var(--dev-edge, #242424);
  --color-border-inverse-strong:      var(--dev-edge2, #333333);
  --color-foreground-inverse:         var(--dev-text, #ffffff);
  --color-muted-foreground-inverse:   var(--dev-dim, #b8b8b8);
  --color-faint-foreground-inverse:   var(--dev-faint, #8f8f8f);

  /* ── Radius ──────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   var(--r-sm, 12px);
  --radius-md:   var(--r-md, 16px);
  --radius-lg:   var(--r-lg, 22px);
  --radius-full: 999px;

  /* ── Elevation ───────────────────────────────────────────────── */
  --shadow-sm:       0 12px 28px -22px rgba(0,0,0,.15);
  --shadow-md:       0 14px 34px -24px rgba(0,0,0,.18);
  --shadow-elevated: 0 26px 60px -30px rgba(0,0,0,.5);

  /* ── Spacing scale — 8px base, half-steps only where genuinely needed ──
     Nothing in current production markup consumes these yet (existing
     spacing is hand-tuned per component); this is the scale future work
     should build against. */
  --space-0:  0;
  --space-1:  4px;   /* half-step */
  --space-2:  8px;
  --space-3:  12px;  /* half-step */
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Layout ──────────────────────────────────────────────────── */
  --layout-max-width:        1440px; /* future editorial canvas ceiling — .wrap stays 1280px today */
  --layout-gutter:           clamp(20px, 4vw, 48px);
  --layout-content-gap:      clamp(20px, 2.4vw, 24px);
  --layout-section-gap:      clamp(64px, 9vw, 128px);
  --layout-reading-column:   min(100%, 720px); /* 680–760px target */

  /* ── Z-index scale — names the stacking layers already in play
     (topbar 40, dock 50, sheet 60, vault-fx 90/95, fullscreen device 90)
     so new overlays (Dialog, Tooltip, Sheet) slot in without guessing. ── */
  --z-sticky:    40;
  --z-dock:      50;
  --z-overlay:   60;
  --z-modal:     70;
  --z-fullscreen:90;
  --z-toast:     100;
}