/* ─────────────────────────────────────────────────────
   FILE: tokens.css
   Purpose: Design tokens only — colors, type, spacing,
            radii, shadows, transitions, layout.
   No selectors other than :root.
   ───────────────────────────────────────────────────── */

:root {
  /* ── Surfaces ───────────────────────────────────── */
  --color-bg:            #ffffff;
  --color-bg-2:          #f9f9fb;
  --color-bg-3:          #f3f4f6;
  --color-bg-4:          #edeef1;
  --color-border:        #e4e5e9;
  --color-border-2:      #d0d2d8;
  --color-text:          #0f1117;
  --color-sub:           #6b7280;
  --color-hint:          #9ca3af;

  /* ── Accent — Blue (primary interactive) ───────── */
  --color-accent:        #0f6fff;
  --color-accent-bg:     #eff5ff;
  --color-accent-border: #c7dcff;

  /* ── Status — Green ────────────────────────────── */
  --color-green:         #0a7c4e;
  --color-green-bg:      #edfaf4;
  --color-green-border:  #b6e8d3;

  /* ── Status — Amber ────────────────────────────── */
  --color-amber:         #92540a;
  --color-amber-bg:      #fdf6e3;
  --color-amber-border:  #f5d89a;

  /* ── God Mode — Orange ─────────────────────────── */
  --color-orange:        #c2410c;
  --color-orange-bg:     #fff3ed;
  --color-orange-border: #fcd5b4;

  /* ── Category — Purple (Design) ────────────────── */
  --color-purple:        #7c3aed;
  --color-purple-bg:     #f5f3ff;
  --color-purple-border: #ddd6fe;

  /* ── Terminal palette (dark) ───────────────────── */
  --term-bg:             #0f1117;
  --term-bar:            #1a1c24;
  --term-fg:             #e2e8f0;
  --term-prompt:         #4ade80;
  --term-key:            #60a5fa;
  --term-value:          #fbbf24;
  --term-muted:          #6b7280;

  /* ── Traffic-light dots (macOS-style) ──────────── */
  --color-traffic-r:     #ff5f57;
  --color-traffic-y:     #febc2e;
  --color-traffic-g:     #28c840;

  /* ── Extra accent shades ───────────────────────── */
  --color-border-strong: #a8aab0;
  --color-accent-deep:   #1a4d99;

  /* ── Orange ramp (God Mode gradients) ──────────── */
  --color-orange-bright: #ea580c;
  --color-orange-mid:    #f97316;
  --color-orange-light:  #fdba74;
  --color-orange-deep:   #7c4a1e;

  /* ── Typography ────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;

  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    20px;
  --text-2xl:   26px;
  --text-3xl:   32px;
  --text-hero:  clamp(36px, 5vw, 52px);

  --leading-tight:  1.15;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-relaxed:1.8;

  --tracking-tight:  -0.04em;
  --tracking-snug:   -0.02em;
  --tracking-wide:   0.06em;
  --tracking-mono:   0.04em;

  /* ── Spacing scale ─────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Radii ─────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  14px;
  --radius-pill: 100px;

  /* ── Shadows ───────────────────────────────────── */
  --shadow-card:   0 1px 3px rgba(15,17,23,0.05), 0 1px 2px rgba(15,17,23,0.03);
  --shadow-hover:  0 8px 24px -8px rgba(15,17,23,0.10), 0 2px 6px -2px rgba(15,17,23,0.06);
  --shadow-focus:  0 0 0 3px rgba(15,111,255,0.18);

  /* ── Transitions ───────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ── Layout ────────────────────────────────────── */
  --max-width:      1080px;
  --nav-height:     56px;
  --section-pad-y:  var(--space-16);
  --section-pad-x:  var(--space-8);
}