:root {
  /* ─── Colors ─────────────────────────────────────────── */
  --color-black:   #0a0a0a;
  --color-dark:    #111111;
  --color-surface: #181818;
  --color-border:  #2a2a2a;
  --color-red:     #c0392b;
  --color-red-hot: #e85d04;
  --color-gold:    #c9a84c;
  --color-white:   #f5f0e8;
  --color-muted:   #888880;

  /* ─── Typography ─────────────────────────────────────── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-serif:   'Playfair Display', serif;
  --font-body:    'DM Sans', sans-serif;

  /* ─── Spacing ────────────────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* ─── Layout ─────────────────────────────────────────── */
  --max-width:     1280px;
  --nav-height:    176px;
  --section-pad-y: clamp(64px, 8vw, 120px);

  /* ─── Transitions ────────────────────────────────────── */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --transition-base: 0.3s ease;
  --transition-reveal: 0.9s var(--ease-out-expo);

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

  /* ─── Shadows ────────────────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.5);
  --shadow-lg:  0 24px 64px rgba(0,0,0,0.6);
  --shadow-red: 0 0 24px rgba(192,57,43,0.4);
  --shadow-gold: 0 0 24px rgba(255,215,0,0.3);

  /* ─── Z-index ─────────────────────────────────────────── */
  --z-base:    1;
  --z-overlay: 100;
  --z-nav:     500;
  --z-modal:   800;
  --z-cursor:  9999;
}