:root {
  /* ─── Colors ──────────────────────────────────────────────── */
  --champagne: #F7E7CE;
  --champagne-dark: #E8D5B0;
  --champagne-light: #FBF2E4;
  --beige: #F5F5DC;
  --white: #FFFFFF;
  --black: #1A1A1A;
  --black-light: #2D2D2D;
  --overlay: rgba(26, 26, 26, 0.55);
  --overlay-heavy: rgba(26, 26, 26, 0.75);

  /* ─── Typography ──────────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-names: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body: 'Montserrat', 'Segoe UI', sans-serif;
  --font-script: 'Great Vibes', cursive;

  /* ─── Font Sizes (fluid) ──────────────────────────────────── */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
  --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --text-lg: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --text-hero: clamp(2.5rem, 2rem + 4vw, 6rem);
  --text-initial: clamp(4rem, 3rem + 5vw, 8rem);

  /* ─── Spacing (8px base) ──────────────────────────────────── */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-12: 6rem;    /* 96px */
  --space-16: 8rem;    /* 128px */

  /* ─── Transitions ─────────────────────────────────────────── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: 0.2s var(--ease-out-quart);
  --transition-base: 0.4s var(--ease-out-expo);
  --transition-slow: 0.8s var(--ease-out-expo);

  /* ─── Layout ──────────────────────────────────────────────── */
  --max-width: 1200px;
  --content-width: 720px;
  --border-radius: 4px;

  /* ─── Shadows ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.08);
  --shadow-md: 0 4px 12px rgba(26, 26, 26, 0.1);
  --shadow-lg: 0 8px 30px rgba(26, 26, 26, 0.12);
}