@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Heebo:wght@300;400;500;600;700&family=Assistant:wght@300;400;600;700&display=swap');

:root {
  /* Backgrounds */
  --color-bg: #F7F3ED;
  --color-bg-alt: #EDE6DA;
  --color-bg-accent: #E8F4F4;
  --color-surface: #FFFFFF;

  /* Text */
  --color-dark: #3D3D3D;
  --color-coal: #3D3D3D;
  --color-muted: #7A7A7A;
  --color-light: #F7F3ED;

  /* Accents */
  --color-gold: #C9A961;
  --color-gold-light: #E8D5A0;
  --color-gold-dark: #A88A40;
  --color-teal-deep: #4A8B8C;
  --color-teal: #5CBDBD;
  --color-teal-light: #B8D8D8;

  /* Legacy aliases */
  --color-cream: #F7F3ED;
  --color-white: #FFFFFF;
  --color-black: #3D3D3D;
  --color-gray: #7A7A7A;

  /* Typography */
  --font-heading: 'Playfair Display', 'Heebo', serif;
  --font-body: 'Heebo', 'Assistant', sans-serif;

  --text-xs: clamp(0.70rem, 0.15vw + 0.66rem, 0.80rem);
  --text-sm: clamp(0.80rem, 0.20vw + 0.75rem, 0.90rem);
  --text-base: clamp(0.90rem, 0.25vw + 0.84rem, 1.00rem);
  --text-md: clamp(1.00rem, 0.35vw + 0.91rem, 1.15rem);
  --text-lg: clamp(1.15rem, 0.50vw + 1.03rem, 1.35rem);
  --text-xl: clamp(1.35rem, 0.80vw + 1.15rem, 1.75rem);
  --text-2xl: clamp(1.60rem, 1.20vw + 1.30rem, 2.25rem);
  --text-3xl: clamp(1.90rem, 1.80vw + 1.45rem, 2.90rem);
  --text-4xl: clamp(2.20rem, 2.50vw + 1.55rem, 3.60rem);
  --text-5xl: clamp(2.60rem, 3.50vw + 1.70rem, 4.50rem);
  --text-6xl: clamp(3.00rem, 4.80vw + 1.80rem, 5.60rem);

  /* Spacing */
  --space-1: clamp(0.25rem, 0.1vw, 0.375rem);
  --space-2: clamp(0.50rem, 0.2vw, 0.75rem);
  --space-3: clamp(0.75rem, 0.3vw, 1.00rem);
  --space-4: clamp(1.00rem, 0.5vw, 1.50rem);
  --space-5: clamp(1.25rem, 0.7vw, 2.00rem);
  --space-6: clamp(1.50rem, 1.0vw, 2.50rem);
  --space-8: clamp(2.00rem, 1.5vw, 3.50rem);
  --space-10: clamp(2.50rem, 2.0vw, 4.50rem);
  --space-12: clamp(3.00rem, 3.0vw, 6.00rem);
  --space-section: clamp(3.5rem, 8vw, 8rem);
  --space-header: 72px;

  /* Layout */
  --max-width: 1400px;
  --max-width-narrow: 720px;
  --section-padding-x: var(--space-4);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(61, 61, 61, 0.04);
  --shadow-md: 0 8px 24px rgba(61, 61, 61, 0.06);
  --shadow-lg: 0 16px 40px rgba(61, 61, 61, 0.08);
  --shadow-gold: 0 8px 24px rgba(201, 169, 97, 0.18);

  /* Radii */
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-full: 9999px;

  /* Z-index scale */
  --z-navbar: 100;
  --z-overlay: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
}

@media (min-width: 768px) {
  :root {
    --section-padding-x: var(--space-6);
  }
}

@media (min-width: 1200px) {
  :root {
    --section-padding-x: var(--space-8);
  }
}