:root {
  /* Base Colors */
  --color-cream: #FDFBF7;
  --color-linen: #FAF7F2;
  --color-stone-light: #F5F1EA;
  --color-stone: #E8E2D5;
  
  /* Text Colors */
  --color-charcoal: #3A3632;
  --color-gray-warm: #6B655A;
  --color-gray-soft: #9B9689;
  
  /* Accent Colors */
  --color-sage: #A8B5A0;
  --color-sage-dark: #8B9982;
  --color-rose: #D4A5A5;
  --color-ochre: #D4B896;
  --color-sky: #A5C4D4;
  
  /* Hero Image Palette - Ocean & Storybook Theme */
  --color-ocean-deep: #1a5490;
  --color-ocean-mid: #2d7bc7;
  --color-ocean-light: #4a90e2;
  --color-ocean-aqua: #6ba3e5;
  
  /* Moss & Forest Greens */
  --color-moss-deep: #3d5a3d;
  --color-moss-mid: #4d6b4d;
  --color-moss-light: #5a7c5a;
  --color-foliage: #2d5016;
  --color-foliage-bright: #4a7c2e;
  
  /* Warm Wood Tones */
  --color-wood-dark: #6b4e3d;
  --color-wood-mid: #8b6f47;
  --color-wood-light: #a0826d;
  --color-wood-warm: #c9a88e;
  
  /* Golden Lantern Glows */
  --color-gold-bright: #ffd700;
  --color-gold-warm: #ffdf4d;
  --color-gold-soft: #ffecb3;
  --color-gold-pale: #fff5d6;
  
  /* Coral & Pink Accents */
  --color-coral-deep: #ff7b7b;
  --color-coral-mid: #ff9999;
  --color-coral-light: #ffb3b3;
  --color-coral-pale: #ffcccc;
  
  /* Whimsical Reds */
  --color-mushroom: #dc143c;
  --color-mushroom-bright: #ff6b6b;
  
  /* Toast Color Aliases */
  --color-coral: var(--color-rose);
  --color-sunshine: var(--color-ochre);
  --color-ocean: var(--color-sky);
  
  /* Pastel Bubble Colors */
  --pastel-lavender: #E6E6FA;
  --pastel-mint: #F0FFF0;
  --pastel-peach: #FFEFD5;
  --pastel-pink: #FFE4E1;
  --pastel-sky: #E0F6FF;
  --pastel-lemon: #FFFACD;
  --pastel-coral: #FFE4B5;
  --pastel-sage: #F0F8F0;
  
  /* Font Families */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --font-story: 'Lora', 'Crimson Text', 'Georgia', serif;
  --font-story-alt: 'Crimson Text', 'Lora', 'Georgia', serif;
  
  /* Font Sizes - Fluid Typography (Mobile-first with clamp) */
  --text-xs: clamp(0.69rem, 0.65rem + 0.2vw, 0.75rem);
  --text-sm: clamp(0.78rem, 0.74rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
  --text-lg: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);
  --text-xl: clamp(1.125rem, 1.04rem + 0.41vw, 1.25rem);
  --text-2xl: clamp(1.25rem, 1.11rem + 0.69vw, 1.5rem);
  --text-3xl: clamp(1.5rem, 1.25rem + 1.25vw, 1.875rem);
  --text-4xl: clamp(1.75rem, 1.36rem + 1.95vw, 2.25rem);
  --text-5xl: clamp(2rem, 1.46rem + 2.71vw, 3rem);
  
  /* Mobile-optimized Line Heights */
  --leading-tight-mobile: 1.15;
  --leading-normal-mobile: 1.4;
  --leading-relaxed-mobile: 1.6;
  --leading-loose-mobile: 1.8;
  
  /* Mobile-optimized Letter Spacing */
  --tracking-tight-mobile: -0.02em;
  --tracking-normal-mobile: 0em;
  --tracking-wide-mobile: 0.02em;
  --tracking-wider-mobile: 0.05em;
  
  /* Reading-optimized Typography for Mobile */
  --text-mobile-body: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --text-mobile-caption: clamp(0.8rem, 0.76rem + 0.2vw, 0.875rem);
  --text-mobile-button: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
  --text-mobile-hero: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
  
  /* Spacing */
  --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;
  
  /* Mobile-optimized spacing */
  --space-mobile-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-mobile-sm: clamp(0.5rem, 1vw, 1rem);
  --space-mobile-md: clamp(0.75rem, 1.5vw, 1.5rem);
  --space-mobile-lg: clamp(1rem, 2vw, 2rem);
  --space-mobile-xl: clamp(1.5rem, 3vw, 3rem);
  --space-mobile-2xl: clamp(2rem, 4vw, 4rem);
  
  /* Border Radius */
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}