:root {
  /* Colors */
  --black:       #080808;
  --black-2:     #111111;
  --black-3:     #1A1A1A;
  --gold:        #C9A84C;
  --gold-light:  #E8C96A;
  --gold-shine:  #FFE08A;
  --white:       #F5F0E8;
  --white-dim:   #9E9E8A;
  --danger:      #FF3B30;
  --success:     #075E54;
  --success-light:#25D366;
  --orange:      #FF9500;

  /* Gradients */
  --grad-gold: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold-shine) 100%);
  --grad-dark: linear-gradient(180deg, var(--black) 0%, var(--black-2) 100%);
  --grad-card: linear-gradient(180deg, transparent 0%, rgba(8,8,8,0.95) 100%);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-title:   'Oswald', Impact, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-number:  'Bebas Neue', Impact, 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;

  /* Border radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-gold: 0 0 30px rgba(201, 168, 76, 0.2);
  --shadow-card: 0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.8);

  /* Transitions */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --transition:  0.3s var(--ease-smooth);
  --transition-slow: 0.6s var(--ease-smooth);

  /* Layout */
  --nav-height: 72px;
  --container:  1280px;
  --gutter:     24px;

  /* Z-index */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-modal:   300;
  --z-cursor:  9999;
}

@media (max-width: 768px) {
  :root {
    --nav-height: 60px;
    --gutter: 16px;
  }
}