/* ============ DESIGN TOKENS ============ */
:root {
  /* === Surface Colors === */
  --surface-dark: #1C1210;
  --surface-warm: #2A1D15;
  --surface-mid: #3D2B1E;
  --surface-light: #E8D5B7;
  --surface-cream: #F2EBE0;
  --surface-steam: #E8DFD0;
  --surface-parchment: #D4C4AB;

  /* === Accent Colors === */
  --accent-amber: #C8923A;
  --accent-amber-light: #DAA54E;
  --accent-copper: #8B4513;
  --accent-copper-rose: #9A6842;
  --accent-gold: #DAA520;
  --accent-burnished: #B8860B;
  --accent-whiskey: #7A5230;
  --accent-walnut: #4E3829;

  /* === Text Colors === */
  --text-primary: #E8D5B7;
  --text-secondary: #9A6842;
  --text-muted: #7A5230;
  --text-dark: #2C1810;
  --text-dark-secondary: #8B4513;

  /* === Score Colors === */
  --score-high: #DAA520;
  --score-mid: #8B4513;
  --score-low: #BFA98A;

  /* === Typography === */
  --font-display: 'Playfair Display', serif;
  --font-ui: 'Space Grotesk', sans-serif;
  --font-body: 'Cormorant Garamond', serif;

  /* === Fluid Type Scale === */
  --text-xs: clamp(0.65rem, 0.6rem + 0.25vw, 0.75rem);
  --text-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem);
  --text-base: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
  --text-md: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem);
  --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --text-xl: clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --text-4xl: clamp(2.5rem, 1.8rem + 3.5vw, 4rem);

  /* === Spacing (4px grid) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* === Easing === */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* === Transitions === */
  --transition-fast: 150ms var(--ease-smooth);
  --transition-base: 300ms var(--ease-smooth);
  --transition-slow: 500ms var(--ease-spring);
  --transition-scene: 600ms ease;

  /* === Warm Glow (hover/focus) === */
  --glow-warm: 0 0 20px rgba(200, 146, 58, 0.15), 0 0 40px rgba(200, 146, 58, 0.06);
  --glow-warm-strong: 0 0 24px rgba(200, 146, 58, 0.25), 0 0 48px rgba(200, 146, 58, 0.1);
}