/* ============================================================
   DESIGN TOKENS
============================================================ */
:root {
  --bg-primary:     #0C0C0C;
  --bg-secondary:   #141414;
  --bg-card:        #1A1A1A;
  --bg-glass:       rgba(255,255,255,0.04);
  --accent:         #F5E642;
  --accent-hover:   #FFD700;
  --text-primary:   #F0F0F0;
  --text-secondary: #888888;
  --text-muted:     #555555;
  --border-glass:   rgba(255,255,255,0.08);
  --border-accent:  rgba(245,230,66,0.3);
  --danger:         #FF4444;
  --warning:        #FF8C00;
  --success:        #22C55E;

  /* Type scale — 1rem = 16px base, modular ramp, no body text < 12px */
  --text-hero:  clamp(2.25rem, 4.2vw, 3.25rem);  /* 36 → 52px */
  --text-h1:    clamp(1.85rem, 3.4vw, 2.75rem);  /* 30 → 44px */
  --text-h2:    clamp(1.5rem, 2.6vw, 2.125rem);  /* 24 → 34px */
  --text-h3:    1.25rem;                          /* 20px */
  --text-body:  1rem;                             /* 16px */
  --text-sm:    0.875rem;                         /* 14px */
  --text-label: 0.75rem;                          /* 12px — min for mono eyebrows */

  --space-section: 120px;
  --radius-card:   16px;
  --radius-pill:   100px;
  --radius-sm:     8px;

  --nav-h: 76px;
  --ease-out: cubic-bezier(.16,1,.3,1);
}