:root {
  /* Colors — exact brand palette */
  --color-bg: #0D1B2A;
  --color-bg-subtle: #091525;
  --color-surface: #122333;
  --color-surface-raised: #182b3d;
  --color-border: #263d52;
  --color-border-subtle: #1a2f40;
  --color-text: #FFFFFF;
  --color-text-muted: #6B7280;
  --color-accent: #E63946;
  --color-accent-hover: #c8303c;
  --color-accent-subtle: rgba(230, 57, 70, 0.12);
  --color-gold: #F1C40F;
  --color-gold-hover: #d4a80c;

  /* Typography */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, sans-serif;

  --text-xs: clamp(0.75rem, 1vw, 0.875rem);
  --text-sm: clamp(0.875rem, 1.2vw, 1rem);
  --text-base: clamp(1rem, 1.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 2vw, 1.375rem);
  --text-xl: clamp(1.375rem, 3vw, 2rem);
  --text-2xl: clamp(2rem, 5vw, 3.25rem);
  --text-3xl: clamp(2.75rem, 7vw, 5rem);
  --text-4xl: clamp(3.5rem, 10vw, 7rem);

  /* Spacing (8px base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* Layout */
  --max-width: 1280px;
  --content-width: 800px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 4px 24px rgba(230, 57, 70, 0.3);
}