/**
 * SOULÉPUREVANA — Official Design System Tokens
 * =============================================
 * Phase 13: Complete Visual Design System
 * Architecture: CSS Custom Properties (Level 4)
 * Aesthetics: High-End Luxury Wellness & Organic Sea Moss
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,600&family=Italiana&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  /* ==========================================================================
     1. COLOR SYSTEM (Phase 13 Specification)
     ========================================================================== */

  /* ── Warm Ivory (Nourishing, calming, organic canvas) ── */
  --color-ivory-50:    #FDFCF9;
  --color-ivory-100:   #FAF7F2; /* Canonical Warm Ivory */
  --color-ivory-200:   #F5F0E6;
  --color-ivory-300:   #ECE4D5;
  --color-ivory-400:   #DFD5C3;
  --color-ivory-tint:  rgba(250, 247, 242, 0.85);

  /* ── Deep Botanical Green (Earth-rooted, wildcrafted flora) ── */
  --color-botanical-950: #051810;
  --color-botanical-900: #09281A; /* Deepest Botanical */
  --color-botanical-800: #0E3D27; /* Canonical Botanical Green */
  --color-botanical-700: #145336;
  --color-botanical-600: #1C6E48;
  --color-botanical-500: #258C5D;
  --color-botanical-400: #38AA77;
  --color-botanical-tint: rgba(14, 61, 39, 0.1);
  --color-botanical-glow: rgba(14, 61, 39, 0.28);

  /* ── Natural Beige (Subtle mineral earth, coastal sand grounding) ── */
  --color-beige-50:    #F8F5F0;
  --color-beige-100:   #EFE8DC; /* Canonical Natural Beige */
  --color-beige-200:   #E4DAC9;
  --color-beige-300:   #D5C7B0;
  --color-beige-400:   #BEAE95;
  --color-beige-border: rgba(190, 174, 149, 0.4);

  /* ── Charcoal (Understated obsidian, refined contrast, editorial depth) ── */
  --color-charcoal-950: #0B0E0C;
  --color-charcoal-900: #141715; /* Canonical Charcoal */
  --color-charcoal-800: #1E2320;
  --color-charcoal-700: #2D332F;
  --color-charcoal-600: #444C47;
  --color-charcoal-500: #626C65;
  --color-charcoal-400: #88938C;
  --color-charcoal-muted: #5D6760;

  /* ── Pure White (Crisp highlights, light card surfaces, floating modals) ── */
  --color-white:       #FFFFFF;
  --color-white-90:    rgba(255, 255, 255, 0.9);
  --color-white-80:    rgba(255, 255, 255, 0.8);
  --color-white-50:    rgba(255, 255, 255, 0.5);
  --color-white-20:    rgba(255, 255, 255, 0.2);
  --color-white-10:    rgba(255, 255, 255, 0.1);

  /* ── Subtle Ocean-Inspired Accents (Marine hydration, St. Lucia waters) ── */
  --color-ocean-950:   #0A262E;
  --color-ocean-900:   #123A44;
  --color-ocean-800:   #184E5B; /* Deep Marine Ocean */
  --color-ocean-700:   #1E6778;
  --color-ocean-600:   #278399; /* Canonical Ocean Accent */
  --color-ocean-500:   #34A1B8;
  --color-ocean-400:   #54BED4;
  --color-ocean-300:   #88D5E5;
  --color-ocean-100:   #E4F4F7;
  --color-ocean-mist:  rgba(39, 131, 153, 0.12);
  --color-ocean-glow:  rgba(52, 161, 184, 0.25);

  /* ── Sacred Gold (Heritage seal, luxury botanical award accents) ── */
  --color-gold-base:   #C9A227;
  --color-gold-bright: #E8C84A;
  --color-gold-muted:  #8F721B;
  --color-gold-light:  #F7E9B8;
  --color-gold-tint:   rgba(201, 162, 39, 0.15);
  --color-gold-glow:   rgba(201, 162, 39, 0.32);

  /* ── Semantic Application Mappings ── */
  --color-bg-base:        var(--color-ivory-100);
  --color-bg-surface:     var(--color-white);
  --color-bg-elevated:    var(--color-ivory-50);
  --color-bg-dark:       var(--color-botanical-900);
  --color-bg-card-dark:  var(--color-charcoal-900);

  --color-text-primary:   var(--color-charcoal-900);
  --color-text-secondary: var(--color-charcoal-600);
  --color-text-tertiary:  var(--color-charcoal-400);
  --color-text-on-dark:   var(--color-ivory-50);
  --color-text-ocean:     var(--color-ocean-700);

  --color-border-light:   var(--color-beige-200);
  --color-border-subtle:  rgba(20, 23, 21, 0.08);
  --color-border-gold:    rgba(201, 162, 39, 0.35);
  --color-border-ocean:   rgba(39, 131, 153, 0.3);

  --color-success:        #1B7546;
  --color-success-bg:     #EBF7F0;
  --color-error:          #B83232;
  --color-error-bg:       #FDF2F2;
  --color-info:           var(--color-ocean-700);
  --color-info-bg:        var(--color-ocean-100);

  /* Backward Compatibility Aliases */
  --color-forest-deep:   var(--color-botanical-900);
  --color-forest-base:   var(--color-botanical-800);
  --color-forest-light:  var(--color-botanical-600);
  --color-forest-tint:   var(--color-botanical-tint);
  --color-obsidian:      var(--color-charcoal-950);
  --color-obsidian-card: var(--color-charcoal-900);
  --color-cream-base:    var(--color-ivory-100);
  --color-cream-card:    var(--color-white);
  --color-alabaster:     var(--color-beige-100);
  --color-text-main:     var(--color-charcoal-900);
  --color-text-muted:    var(--color-charcoal-600);
  --color-text-light:    var(--color-ivory-50);

  /* Sea Moss Gel Flavor Accents */
  --flavor-pineapple:    #E6A817;
  --flavor-mango:        #D4722A;
  --flavor-strawberry:   #961D36;
  --flavor-coffee:       #4A2818;
  --flavor-berry:        #3A2482;
  --flavor-mint-lime:    #1A5C3A;


  /* ==========================================================================
     2. SPACING SCALE (Modular & Geometric: 2px to 128px)
     ========================================================================== */
  --space-3xs: 0.125rem; /* 2px  - Hairline borders, micro offsets */
  --space-2xs: 0.25rem;  /* 4px  - Micro gap, badge padding */
  --space-xs:  0.5rem;   /* 8px  - Compact gap, icon margin */
  --space-sm:  0.75rem;  /* 12px - Input padding sm, inline gap */
  --space-md:  1rem;     /* 16px - Canonical baseline grid */
  --space-lg:  1.5rem;   /* 24px - Section gutter, card padding */
  --space-xl:  2rem;     /* 32px - Layout gutter, modal padding */
  --space-2xl: 3rem;     /* 48px - Major component separation */
  --space-3xl: 4rem;     /* 64px - Editorial section padding */
  --space-4xl: 6rem;     /* 96px - Major section spacer */
  --space-5xl: 8rem;     /* 128px - Hero & narrative breathing room */


  /* ==========================================================================
     3. TYPOGRAPHY SCALE (Editorial Serifs + Clean UI Sans)
     ========================================================================== */

  /* Font Families */
  --font-serif-editorial: 'Italiana', 'Playfair Display', Georgia, serif;
  --font-serif-display:   'Playfair Display', Georgia, serif;
  --font-serif-accent:    'Cormorant Garamond', Garamond, serif;
  --font-sans:            'Plus Jakarta Sans', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans-ui:         'Montserrat', 'Plus Jakarta Sans', sans-serif;

  /* Legacy Family Aliases */
  --font-display: var(--font-serif-editorial);
  --font-accent:  var(--font-serif-accent);

  /* Fluid Clamped Scale */
  --text-display-2xl: clamp(3.25rem, 6.5vw + 1rem, 5.75rem);
  --text-display-xl:  clamp(2.75rem, 5vw + 0.75rem, 4.5rem);
  --text-display-lg:  clamp(2.25rem, 4vw + 0.5rem, 3.5rem);
  --text-hero:        clamp(2.5rem, 4.5vw + 0.75rem, 4.25rem);
  --text-h1:          clamp(2rem, 3.25vw + 0.5rem, 3rem);
  --text-h2:          clamp(1.625rem, 2.5vw + 0.25rem, 2.375rem);
  --text-h3:          clamp(1.25rem, 1.75vw + 0.25rem, 1.75rem);
  --text-h4:          1.25rem;    /* 20px */
  --text-h5:          1.125rem;   /* 18px */
  --text-h6:          1rem;       /* 16px */

  --text-lead:        1.1875rem;  /* 19px - Editorial lead */
  --text-body:        1rem;       /* 16px - Baseline reading */
  --text-body-sm:     0.875rem;   /* 14px - UI labels, tables */
  --text-caption:     0.75rem;    /* 12px - Footnotes, timestamps */
  --text-overline:    0.6875rem;  /* 11px - Category eyebrows, badges */

  /* Weights */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Line Heights */
  --lh-none:    1;
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-relaxed: 1.75;
  --lh-loose:   2;

  /* Letter Spacing */
  --tracking-tighter: -0.035em;
  --tracking-tight:   -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.18em;


  /* ==========================================================================
     4. ELEVATION, SHADOWS & GLASSMORPHISM
     ========================================================================== */
  --shadow-xs:      0 1px 3px rgba(20, 23, 21, 0.04);
  --shadow-sm:      0 2px 8px rgba(20, 23, 21, 0.06);
  --shadow-md:      0 8px 24px rgba(20, 23, 21, 0.08);
  --shadow-lg:      0 16px 44px rgba(20, 23, 21, 0.12);
  --shadow-xl:      0 28px 64px rgba(20, 23, 21, 0.16);
  
  --shadow-botanical: 0 12px 36px rgba(14, 61, 39, 0.22);
  --shadow-ocean:     0 12px 36px rgba(39, 131, 153, 0.22);
  --shadow-gold:      0 8px 32px rgba(201, 162, 39, 0.28);
  --shadow-forest:    0 12px 36px rgba(13, 74, 42, 0.25);

  --glass-bg-light:   rgba(250, 247, 242, 0.88);
  --glass-bg-white:   rgba(255, 255, 255, 0.85);
  --glass-bg-dark:    rgba(14, 24, 18, 0.88);
  --glass-border:     1px solid rgba(201, 162, 39, 0.25);
  --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.2);
  --glass-blur:       blur(16px);
  --glass-blur-lg:    blur(28px);


  /* ==========================================================================
     5. RADII & TRANSITIONS
     ========================================================================== */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  --ease-liquid:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-instant: 100ms;
  --duration-fast:    200ms;
  --duration-base:    350ms;
  --duration-slow:    650ms;

  /* Z-Index Hierarchy */
  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-header:    300;
  --z-fab:       400;
  --z-backdrop:  500;
  --z-modal:     600;
  --z-toast:     700;
}

/* ==========================================================================
   GLOBAL UTILITY CLASSES
   ========================================================================== */
.font-serif-editorial { font-family: var(--font-serif-editorial); }
.font-serif-display   { font-family: var(--font-serif-display); }
.font-serif-accent    { font-family: var(--font-serif-accent); }
.font-sans            { font-family: var(--font-sans); }
.font-sans-ui         { font-family: var(--font-sans-ui); }

.text-gold { color: var(--color-gold-base); }
.text-ocean { color: var(--color-ocean-700); }
.text-botanical { color: var(--color-botanical-800); }
.text-charcoal { color: var(--color-charcoal-900); }
.text-muted { color: var(--color-charcoal-600); }

.bg-warm-ivory { background-color: var(--color-ivory-100); }
.bg-natural-beige { background-color: var(--color-beige-100); }
.bg-deep-botanical { background-color: var(--color-botanical-900); color: var(--color-ivory-50); }
.bg-charcoal { background-color: var(--color-charcoal-900); color: var(--color-ivory-50); }
.bg-ocean-mist { background-color: var(--color-ocean-100); }

.gold-gradient-text {
  background: linear-gradient(135deg, #F9DE7B 0%, #C9A227 50%, #9F7B18 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ocean-gradient-text {
  background: linear-gradient(135deg, var(--color-ocean-400) 0%, var(--color-ocean-700) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Backward compatibility for legacy ritual buttons */
.btn-ritual-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.875rem 2rem;
  background-color: var(--color-botanical-800);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gold-base);
  box-shadow: var(--shadow-forest), 0 2px 10px rgba(0,0,0,0.2);
  transition: all var(--duration-base) var(--ease-liquid);
  cursor: pointer;
  text-decoration: none;
}

.btn-ritual-primary:hover {
  background-color: var(--color-botanical-700);
  border-color: var(--color-gold-bright);
  box-shadow: var(--shadow-gold), 0 4px 16px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

.btn-ritual-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.875rem 2rem;
  background: transparent;
  color: var(--color-ivory-50);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: all var(--duration-base) var(--ease-liquid);
  cursor: pointer;
  text-decoration: none;
}

.btn-ritual-outline:hover {
  border-color: var(--color-gold-base);
  color: var(--color-gold-bright);
  background: rgba(201, 162, 39, 0.08);
  transform: translateY(-2px);
}