/* ===== FONTS ===== */


/* ===== DESIGN TOKENS ===== */
:root {
  /* Luxury Brand Colors */
  --c-black: #0A0A0A;
  --c-white: #FEFEFE;
  --c-gold: #D4AF37;
  --c-gold-light: #F4E4BC;
  --c-gold-dark: #B8941F;
  --c-gray-50: #F8F8F8;
  --c-gray-100: #E8E8E8;
  --c-gray-200: #D1D1D1;
  --c-gray-300: #B4B4B4;
  --c-gray-400: #6B6B6B;
  --c-gray-500: #4a4a4a;
  --c-gray-600: #3a3a3a;
  --c-gray-700: #171717;
  --c-gray-800: #111111;
  --c-gray-900: #0D0D0D;

  /* Semantic Colors */
  --bg: var(--c-gray-900);
  --text: var(--c-white);
  --accent: var(--c-gold);
  --surface: var(--c-gray-800);
  --surface-elevated: var(--c-gray-700);
  --border: var(--c-gray-600);
  --border-subtle: var(--c-gray-700);

  /* Typography Scale */
  --step--1: clamp(12px, 0.8vw, 14px);
  --step-0: clamp(14px, 1vw, 16px);
  --step-1: clamp(18px, 2vw, 22px);
  --step-2: clamp(26px, 3.2vw, 40px);
  --step-3: clamp(40px, 6vw, 88px);
  --step-4: clamp(60px, 8vw, 120px);

  /* Luxury Font Families */
  --font-display: "Playfair Display", serif;
  --font-title: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-subtitle: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;

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

  /* Content widths */
  --content-narrow: 600px;
  --content-medium: 800px;
  --content-wide: 1200px;
  --content-full: 1400px;

  /* Border Radius */
  --radius: 16px;
  --radius-sm: 8px;
  --radius-lg: 24px;

  /* Shadows */
  --shadow: 0 10px 30px rgba(0,0,0,.3);
  --shadow-sm: 0 4px 16px rgba(0,0,0,0.15);
  --shadow-lg: 0 16px 64px rgba(0,0,0,0.25);

  /* Transitions */
  --transition-fast: 120ms ease-out;
  --transition-normal: 160ms ease-out;
  --transition-slow: 240ms ease-out;

  /* Z-index layers */
  --z-nav: 100;
  --z-drawer: 200;
  --z-hero: 10;
  --z-content: 1;

  /* Layout widths */
  --maxw-lg: 1024px;
  --maxw-xl: 1280px;

  /* Additional spacing scale (compact utilities) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Focus ring */
  --focus: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);

  /* Elevations */
  --elev-1: 0 2px 8px rgba(0,0,0,.06);
  --elev-2: 0 8px 24px rgba(0,0,0,.12);

  /* Header height */
  --header-h: 64px;
}

/* Light mode support */
@media (prefers-color-scheme: light) {
  :root {
    --bg: var(--c-white);
    --text: var(--c-gray-900);
    --surface: var(--c-gray-100);
    --border: #e0e0e0;
    --shadow: 0 10px 30px rgba(0,0,0,0.1);
    --shadow-sm: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 16px 64px rgba(0,0,0,0.12);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01ms;
    --transition-normal: 0.01ms;
    --transition-slow: 0.01ms;
  }
}