/* tokens.css — Canonical design tokens. TOKENS ONLY — no selectors, no component styles. Per D-03. */

:root {
  /* ===================================================================
     PRIMITIVE LAYER
     Raw values only. Underscore prefix = private — do not use directly
     in components. Reference semantic tokens below instead.
     =================================================================== */

  --_indigo-400: #818cf8;
  --_indigo-500: #6366f1;
  --_slate-950:  #08080c;
  --_slate-900:  #0e0e14;
  --_slate-850:  #14141c;
  --_slate-800:  #1a1a24;
  --_slate-750:  #22222e;


  /* ===================================================================
     SEMANTIC LAYER: meaning-bearing names, no raw values
     =================================================================== */

  /* --- Surfaces --- */
  --surface-base:  var(--_slate-950); /* page background */
  --surface-0:     var(--_slate-900); /* card background */
  --surface-1:     var(--_slate-850); /* elevated card */
  --surface-2:     var(--_slate-800); /* higher elevation */
  --surface-3:     var(--_slate-750); /* highest elevation */
  --surface-hover: #262636;           /* hover state for cards/buttons -- promoted from v2.html */


  /* --- Borders --- */
  --border-faint:  rgba(255, 255, 255, 0.06);
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);


  /* --- Text (contrast ratios verified on --surface-base #08080c) --- */
  --text-primary:   #f5f5f7; /* 18.4:1 — body text safe */
  --text-secondary: #b8b8c8; /* 10.2:1 — body text safe */
  --text-tertiary:  #8888a0; /*  5.8:1 — body text safe */
  --text-muted:     #606078; /*  3.3:1 — UI-only (3.3:1): timestamps, captions, metadata labels. Do NOT use for paragraph text. */
  --text-disabled:  #505068; /* Intentionally < 3:1 — WCAG SC 1.4.3 exempts disabled states. Must pair with aria-disabled or disabled attr. */


  /* --- Interactive Accent --- */
  --accent:       var(--_indigo-500); /* UI elements only: buttons, borders, focus rings. 4.48:1 on surface-base. NOT for text. */
  --accent-text:  var(--_indigo-400); /* Text links and interactive text. 6.7:1 on surface-base. WCAG AA pass. */
  --accent-hover: var(--_indigo-400);


  /* --- Semantic Status Colors --- */
  --color-success: #00c864;
  --color-warning: #ffb400;
  --color-error:   #ff6464;
  --color-info:    #3b82f6;


  /* --- Provider Brands (model attribution) --- */
  --openai:    #00a67e;
  --anthropic: #d4a574;
  --google:    #4285f4;
  --xai:       #1da1f2;
  --meta:      #0668e1;
  --mistral:   #ff7000;
  --deepseek:  #4d6bfe;


  /* --- Trust Levels --- */
  --trust-high: #00c864;
  --trust-med:  #ffb400;
  --trust-low:  #ff6464;
  --live:       #00c864;


  /* --- Spacing (4px base unit per D-01) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;


  /* --- Typography --- */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Space Mono', 'Consolas', monospace;

  --text-xs:   0.75rem;  /* 12px */
  --text-sm:   0.875rem; /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg:   1.125rem; /* 18px */
  --text-xl:   1.25rem;  /* 20px */
  --text-2xl:  1.5rem;   /* 24px */
  --text-3xl:  2rem;     /* 32px */
  --text-4xl:  2.5rem;   /* 40px */

  /* Line-height scale (D-08: consolidate 9 values to 3) */
  --lh-tight:   1.2;  /* headings, display text */
  --lh-normal:  1.5;  /* body text (matches base.css body line-height) */
  --lh-relaxed: 1.75; /* long-form reading, captions */


  /* --- Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;


  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);


  /* --- Motion Tokens --- */
  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);


  /* --- Z-Index Scale --- */
  --z-nav:     200;
  --z-modal:   500;
  --z-tooltip: 700;
  --z-toast:   800;
}