/* css/variables.css */
:root {
  /* Colors - Dark Theme */
  --color-bg: #0a0a0a;
  --color-bg-alt: #141414;
  --color-text: #f0f0f0;
  --color-text-muted: #888888;
  --color-accent: #d4af37; /* Gold/Taupe accent */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-overlay: rgba(10, 10, 10, 0.85);

  /* Typography */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* Transitions */
  --transition-fast: 0.4s cubic-bezier(0.21, 1.11, 0.81, 0.99);
  --transition-normal: 1s cubic-bezier(0.65, 0, 0.05, 1); /* Cinematic */
  --transition-slow: 1.8s cubic-bezier(0.65, 0, 0.05, 1); /* Cinematic slow */

  /* Layout */
  --max-width: 1400px;
  --header-height: 80px;
}

/* Mobile spacing overrides */
@media (max-width: 767px) {
  :root {
    --space-md: 1.25rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --header-height: 64px;
  }
}