@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ==========================================================================
   PRANA SANCTUARY - DESIGN SYSTEM TOKENS & VARIABLES
   ========================================================================== */

:root {
   /* ==========================================================================
     COLOR PALETTE TOKENS — OLIVE TINT EDITION
     - Olive Tint:        #1b422f  (core organic olive canvas)
     - Olive Surface:     #224F3A  (cards & section backgrounds)
     - Olive Surface Alt: #2C5E47  (elevated surfaces & hovers)
     - Olive Deep Dark:   #133324  (deepest contrast & footer)
     - Luminous Olive:    #357858  (interactive accents)
     - Cream:             #EFE0BF  (warm highlight & typography)
     - Gold:              #C39648  (luxury accents & buttons)
     ========================================================================== */
   --color-white: #FFFFFF;
   --color-cream-beige: #F7F3EB;
   --color-olive: #1B422F;
   --color-forest: #1B422F;
   --color-forest-rich: #2C5E47;
   --color-emerald-dark: #133324;

   /* Backgrounds — Light Sanctuary Palette */
   --bg-primary: #FDFBF7;
   --bg-surface: #F7F3EB;
   --bg-surface-alt: #FFFFFF;
   --bg-dark: #1B422F;
   --bg-dark-surface: #224F3A;
   --bg-dark-surface-alt: #2C5E47;
   --bg-glass: rgba(253, 251, 247, 0.96);
   --bg-glass-dark: rgba(27, 66, 47, 0.96);

   /* Accent Colors */
   --color-sage: #2C5E47;
   --color-sage-light: #F7F3EB;
   --color-sage-soft: rgba(44, 94, 71, 0.08);
   --color-terracotta: #2C5E47;
   --color-terracotta-light: #F7F3EB;
   --color-terracotta-glow: rgba(44, 94, 71, 0.15);
   --color-gold: #D4AF37;
   --color-gold-light: #F7F3EB;
   --color-gold-glow: rgba(212, 175, 55, 0.3);

   /* Typography Colors — High-Legibility Light Mode */
   --text-main: #1C2B26;
   --text-secondary: #3B4D45;
   --text-muted: #566860;
   --text-light: #FFFFFF;
   --text-light-secondary: #EFE0BF;
   --text-light-muted: #C0D2C8;

   /* Borders & Dividers */
   --border-subtle: rgba(184, 142, 61, 0.16);
   --border-medium: rgba(27, 66, 47, 0.12);
   --border-gold: rgba(184, 142, 61, 0.4);
   --border-dark-subtle: rgba(239, 224, 191, 0.12);
   --border-dark-medium: rgba(239, 224, 191, 0.24);


   /* Typography */
   --font-serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
   --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-accent: 'Fraunces', serif;

   /* Font Scales */
   --text-xs: 0.75rem;
   /* 12px */
   --text-sm: 0.875rem;
   /* 14px */
   --text-base: 1rem;
   /* 16px */
   --text-lg: 1.125rem;
   /* 18px */
   --text-xl: 1.25rem;
   /* 20px */
   --text-2xl: 1.5rem;
   /* 24px */
   --text-3xl: 2rem;
   /* 32px */
   --text-4xl: 2.5rem;
   /* 40px */
   --text-5xl: 3.25rem;
   /* 52px */
   --text-6xl: 4.25rem;
   /* 68px */
   --text-hero: clamp(2.75rem, 5.5vw, 5.5rem);

   /* Spacing Scale */
   --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 0.75rem;
   --space-4: 1rem;
   --space-5: 1.25rem;
   --space-6: 1.5rem;
   --space-8: 2rem;
   --space-10: 2.5rem;
   --space-12: 3rem;
   --space-16: 4rem;
   --space-20: 5rem;
   --space-24: 6rem;
   --space-32: 8rem;

   /* Layout */
   --container-max: 1320px;
   --container-narrow: 980px;
   --container-pad: clamp(1.25rem, 4vw, 2.5rem);
   --header-height: 84px;

   /* Shadows */
   --shadow-sm: 0 2px 8px rgba(14, 23, 20, 0.04);
   --shadow-md: 0 8px 24px rgba(14, 23, 20, 0.08);
   --shadow-lg: 0 16px 40px rgba(14, 23, 20, 0.12);
   --shadow-xl: 0 24px 60px rgba(14, 23, 20, 0.16);
   --shadow-glow-gold: 0 0 35px var(--color-gold-glow);
   --shadow-glow-terracotta: 0 0 35px var(--color-terracotta-glow);

   /* Border Radii */
   --radius-xs: 4px;
   --radius-sm: 8px;
   --radius-md: 14px;
   --radius-lg: 20px;
   --radius-xl: 32px;
   --radius-full: 9999px;
   --radius-organic: 40px 10px 40px 10px;

   /* Transitions */
   --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
   --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   --transition-breath: 4s cubic-bezier(0.4, 0, 0.2, 1);

   /* Glassmorphism Filters */
   --glass-blur: blur(16px);
   --glass-blur-heavy: blur(28px);
}