/* ============================================================
   DESIGN TOKEN SYSTEM — Single source of truth
   All colors, spacing, typography, radii, shadows, and motion
   are defined here. NEVER hardcode values elsewhere.
   ============================================================ */

:root {
  /* ── Brand Palette ── */
  --color-bg-primary:     #0a0a0a;      /* page background         */
  --color-bg-surface:     #111111;      /* cards, panels           */
  --color-bg-elevated:    #1a1a1a;      /* hover states, tooltips  */
  --color-border:         rgba(255,255,255,0.08);
  --color-border-hover:   rgba(255,255,255,0.16);

  /* ── Accent (used sparingly — CTAs, active states, metrics) ── */
  --color-accent:         #e8a045;
  --color-accent-muted:   rgba(232,160,69,0.12);

  /* ── Text Hierarchy ── */
  --color-text-primary:   #f0ede8;
  --color-text-secondary: #8a8680;
  --color-text-tertiary:  #4d4a47;

  /* ── Semantic ── */
  --color-success:        #4caf7d;
  --color-success-muted:  rgba(76,175,125,0.12);

  /* ── Spacing Scale (Fluid) ── */
  --space-1:  clamp(2px, 0.25rem, 4px);
  --space-2:  clamp(4px, 0.5rem, 8px);
  --space-3:  clamp(8px, 0.75rem, 12px);
  --space-4:  clamp(12px, 1rem, 16px);
  --space-5:  clamp(16px, 1.5rem, 24px);
  --space-6:  clamp(24px, 2rem, 32px);
  --space-7:  clamp(32px, 3rem, 48px);
  --space-8:  clamp(48px, 4rem, 64px);
  --space-9:  clamp(64px, 6rem, 96px);

  /* ── Typography (Fluid) ── */
  --font-sans:   'Inter', 'Geist', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', 'Geist Mono', monospace;
  
  --text-xs:     clamp(10px, 0.75rem, 11px);
  --text-sm:     clamp(12px, 0.85rem, 13px);
  --text-base:   clamp(14px, 1rem, 15px);
  --text-lg:     clamp(16px, 1.25rem, 18px);
  --text-xl:     clamp(20px, 1.5rem, 24px);
  --text-2xl:    clamp(24px, 2rem, 32px);
  --text-3xl:    clamp(32px, 3rem, 48px);
  --text-hero:   clamp(40px, 10vw, 80px);

  /* ── Radii ── */
  --radius-sm:   6px;
  --radius-md:   clamp(8px, 1.5vw, 12px);
  --radius-lg:   clamp(12px, 2.5vw, 20px);
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-card: 0 0 0 0.5px var(--color-border);
  --shadow-lift: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 0.5px var(--color-border-hover);

  /* ── Motion ── */
  --ease-out:          cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:       cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:     160ms;
  --duration-base:     250ms;
  --duration-slow:     400ms;

  /* ── Breakpoints (for reference in JS) ── */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;

  /* ── Legacy aliases (keep for backward compat, will be phased out) ── */
  --bg-dark:      var(--color-bg-primary);
  --bg-card:      var(--color-bg-surface);
  --border-color: var(--color-border);
  --text-main:    var(--color-text-primary);
  --text-muted:   var(--color-text-secondary);
  --font-main:    var(--font-sans);
  --accent-blue:  var(--color-accent);
  --accent-cyan:  var(--color-accent);
  --accent-purple: #8b5cf6;
}