:root {
  /* ── Colors: Dark mode (default) ── */
  --color-bg-primary:      #0A0A0A;
  --color-bg-secondary:    #141414;
  --color-bg-tertiary:     #1C1C1C;
  --color-bg-elevated:     #222222;

  --color-border:          #2A2A2A;
  --color-border-hover:    #3A3A3A;
  --color-border-accent:   #22D3EE;

  --color-text-primary:    #FAFAFA;
  --color-text-secondary:  #A0A0A0;
  --color-text-tertiary:   #666666;
  --color-text-muted:      #444444;

  --color-accent:          #22D3EE;
  --color-accent-hover:    #67E8F9;
  --color-accent-muted:    rgba(34, 211, 238, 0.12);

  --color-danger:          #FF5252;
  --color-warning:         #FFA726;

  /* ── Typography ── */
  --font-primary:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --text-hero:       clamp(3rem, 5vw, 4.5rem);
  --text-h1:         clamp(2.25rem, 4vw, 3rem);
  --text-h2:         clamp(1.5rem, 3vw, 2rem);
  --text-h3:         clamp(1.125rem, 2vw, 1.5rem);
  --text-body:       1rem;
  --text-body-lg:    1.125rem;
  --text-small:      0.875rem;
  --text-mono:       0.8125rem;

  --font-light:      300;
  --font-regular:    400;
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;
  --font-extrabold:  800;

  --leading-tight:   1.15;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.05em;

  /* ── Spacing ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;
  --space-11:  80px;
  --space-12:  96px;
  --space-13:  120px;
  --space-14:  160px;

  /* ── Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px rgba(34, 211, 238, 0.15);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Container ── */
  --container-max:     1200px;
  --container-padding: clamp(16px, 4vw, 64px);
}

