/* tokens.css — Design tokens (brutalist tech) */

:root {
  --ink:          #0a0a0a;
  --paper:        #fafafa;
  --paper-dim:    #888888;
  --paper-faint:  #2a2a2a;
  --surface-1:    #111111;
  --surface-2:    #181818;
  --accent:       #E8000E;
  --accent-ink:   #ffffff;
  --brand-red:    #E8000E;
  --violet:       #7B61FF;
  --cyan:         #00D4FF;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --type-hero:    clamp(2rem, 8vw, 7.5rem);
  --type-display: clamp(2.5rem, 5vw, 4.5rem);
  --type-h2:      clamp(1.75rem, 3vw, 2.5rem);
  --type-h3:      1.25rem;
  --type-2xl:     1.5rem;
  --type-xl:      1.25rem;
  --type-lg:      1.125rem;
  --type-base:    1rem;
  --type-body:    1rem;
  --type-sm:      0.9375rem;
  --type-small:   0.875rem;
  --type-micro:   0.75rem;

  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;
  --sp-4:  16px;  --sp-5:  20px;  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;  --sp-10: 40px;  --sp-12: 48px;
  --sp-16: 64px;  --sp-20: 80px;
  --sp-24: 96px;  --sp-32: 128px; --sp-40: 160px;

  --r-none: 0;
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;

  --max-outer:    1440px;
  --max-content:  1200px;
  --side-pad:     clamp(24px, 4vw, 80px);
  --section-pad:  clamp(80px, 12vw, 160px);
  --nav-h:        64px;

  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:     150ms;
  --dur-base:     250ms;
  --dur-slow:     400ms;

  --z-nav:        100;
  --z-overlay:    200;
  --z-drawer:     300;
  --z-toast:      400;
}

[data-theme='light'] {
  --ink:          #fafafa;
  --paper:        #0a0a0a;
  --paper-dim:    #555555;
  --paper-faint:  #e5e5e5;
  --surface-1:    #ffffff;
  --surface-2:    #f5f5f5;
}