:root {
  /* Colors */
  --color-bg-primary: #0f0c0a;
  --color-bg-secondary: #1a1613;
  --color-bg-card: #231e19;
  --color-bg-card-hover: #2d2520;
  --color-text-primary: #f2ebe2;
  --color-text-secondary: #a89882;
  --color-text-tertiary: #7a6b5a;
  --color-accent: #c17f4e;
  --color-accent-light: #d4a76a;
  --color-accent-green: #7d8c6e;
  --color-border: rgba(193, 127, 78, 0.12);
  --color-overlay: rgba(15, 12, 10, 0.85);

  /* Typography */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 10rem;

  /* Animation */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 800ms;
  --duration-reveal: 1200ms;

  /* Shadows & Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-card: 0 4px 24px rgba(0,0,0,0.25);
  --shadow-card-hover: 0 12px 40px rgba(0,0,0,0.35);
  --shadow-nav: 0 1px 0 rgba(193,127,78,0.08);
}