:root {
  --color-bg: #FAF7F2;
  --color-bg-alt: #F5E6E0;
  --color-accent: #E8B4B8;
  --color-accent-dark: #D4959B;
  --color-text: #4A3728;
  --color-text-light: #7A6558;
  --color-white: #FFFFFF;
  --color-overlay: rgba(74, 55, 40, 0.55);

  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Poppins", system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(74, 55, 40, 0.08);
  --shadow-md: 0 4px 20px rgba(74, 55, 40, 0.12);
  --shadow-lg: 0 8px 40px rgba(74, 55, 40, 0.16);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --header-height: 72px;
  --header-total: calc(var(--header-height) + var(--safe-top));
  --sticky-cta-height: 72px;
  --sticky-offset: calc(var(--sticky-cta-height) + var(--safe-bottom));
  --max-width: 1200px;
  --transition: 0.3s ease;
}

@media (max-width: 768px) {
  :root {
    --header-height: 60px;
    --sticky-cta-height: 64px;
  }
}