:root {
  /* ===== Colors ===== */
  --color-bg: #111113;
  --color-bg-raised: #18181b;
  --color-surface: rgba(24, 24, 27, 0.82);
  --color-surface-strong: rgba(28, 28, 31, 0.92);
  --color-surface-subtle: rgba(24, 24, 27, 0.55);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-border-hover: rgba(245, 158, 11, 0.30);
  --color-text: #fafafa;
  --color-text-secondary: #a1a1aa;
  --color-text-tertiary: #71717a;
  --color-accent: #f59e0b;
  --color-accent-strong: #fbbf24;
  --color-accent-soft: rgba(245, 158, 11, 0.12);
  --color-accent-text: #111113;

  /* ===== Spacing (8px base) ===== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ===== Border Radius ===== */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ===== Shadows ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 24px rgba(245, 158, 11, 0.12);

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

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.5rem, 3.5vw, 2.25rem);
  --text-4xl: clamp(1.75rem, 4.5vw, 3rem);
  --text-5xl: clamp(2rem, 7vw, 4.5rem);

  --leading-tight: 1.08;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ===== Layout ===== */
  --content-width: 1024px;
  --content-width-narrow: 720px;
  --header-height: 3.5rem;

  /* ===== Transitions ===== */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 400ms;
  --duration-reveal: 450ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}