/* === DESIGN TOKENS — Not Average ================================== */
/* Single source of truth. All other CSS must consume these.          */
/* Generated: 2026-04-17 — load BEFORE global.css.                    */

:root {
  /* --- COLOR ------------------------------------------------------- */
  /* Base */
  --color-bg: #050505;
  --color-bg-raised: #0F0F0F;
  --color-bg-elevated: #1A1A1A;
  --color-surface-accent: rgba(118, 251, 86, 0.05);
  --color-surface-accent-hover: rgba(118, 251, 86, 0.08);
  --color-surface-danger: rgba(255, 107, 107, 0.05);

  /* Text */
  --color-text: #FFFFFF;
  --color-text-muted: #999999;
  --color-text-subtle: #666666;
  --color-text-inverse: #050505;

  /* Brand */
  --color-accent: #76FB56;
  --color-accent-hover: #8AFF70;
  --color-accent-dim: rgba(118, 251, 86, 0.3);
  --color-accent-glow: rgba(118, 251, 86, 0.5);
  --color-accent-bg: rgba(118, 251, 86, 0.08);

  /* States */
  --color-success: #76FB56;
  --color-warning: #FFB347;
  --color-error: #FF6B6B;
  --color-info: #7FB3FF;

  /* Borders & dividers */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.2);
  --color-border-accent: rgba(118, 251, 86, 0.3);

  /* --- TYPOGRAPHY -------------------------------------------------- */
  --font-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale (1.250 Major Third-ish, capped on mobile via clamp) */
  --text-xs: clamp(11px, 1vw, 12px);     /* labels, micro */
  --text-sm: clamp(13px, 1.2vw, 14px);   /* secondary body, meta */
  --text-base: clamp(15px, 1.5vw, 17px); /* body */
  --text-lg: clamp(17px, 1.7vw, 19px);   /* lead */
  --text-xl: clamp(20px, 2vw, 22px);     /* small headlines */
  --text-2xl: clamp(24px, 2.5vw, 28px);  /* card titles */
  --text-3xl: clamp(28px, 3.2vw, 36px);  /* section subtitles */
  --text-4xl: clamp(32px, 4vw, 48px);    /* section titles */
  --text-5xl: clamp(36px, 4.2vw, 52px);  /* small heroes */
  --text-6xl: clamp(42px, 5vw, 64px);    /* medium heroes */
  --text-7xl: clamp(48px, 6vw, 76px);    /* large heroes / pull quotes */
  --text-8xl: clamp(56px, 7.5vw, 96px);  /* stat spotlights */

  /* Line heights */
  --leading-tight: 1.1;   /* heroes */
  --leading-snug: 1.2;    /* headlines */
  --leading-normal: 1.5;  /* body */
  --leading-relaxed: 1.7; /* long-form */

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.08em; /* labels / mono */

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* --- SPACING (4pt scale) ---------------------------------------- */
  --space-0: 0;
  --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-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* Section rhythm */
  --section-y: clamp(48px, 7vw, 88px);
  --section-y-sm: clamp(40px, 5vw, 64px);
  --section-y-lg: clamp(72px, 10vw, 120px);

  /* Container */
  --container-max: 1200px;
  --container-max-wide: 1400px;
  --container-max-narrow: 820px;
  --container-px: clamp(16px, 4vw, 32px);

  /* --- RADIUS ------------------------------------------------------ */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 9999px;

  /* --- SHADOWS (elevation) --------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 24px 48px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 80px rgba(118, 251, 86, 0.15);
  --shadow-glow-strong: 0 0 120px rgba(118, 251, 86, 0.25);

  /* --- MOTION ----------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --duration-slower: 800ms;

  /* --- Z-INDEX ---------------------------------------------------- */
  --z-nav: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-tooltip: 1500;

  /* --- INTERACTIVE MINIMUMS (a11y touch targets) ----------------- */
  --tap-target-min: 48px;
}

/* Preserve legacy variable aliases used in existing CSS so nothing breaks */
:root {
  --bg-body: var(--color-bg);
  --bg-card: var(--color-bg-raised);
  --text-main: var(--color-text);
  --text-muted: var(--color-text-muted);
  --accent: var(--color-accent);
  --border: var(--color-border);
  --border-hover: var(--color-border-accent);
  --glow: var(--color-accent-glow);
  --container: var(--container-max);
  --container-wide: var(--container-max-wide);
  --easing: var(--ease-out);
  --easing-smooth: var(--ease-out);
}