/* ============================================
   SHRED HIMALAYAS — Premium Design Tokens
   Forest Green Palette — Extracted from Reference
   Muted Sage · Fern · Emerald · Deep Pine
   ============================================ */

:root {
  /* ——— Core Brand Colors ——— */
  --primary:          #238B45;
  --primary-rgb:      35, 139, 69;
  --forest-green:     var(--primary);
  --forest-green-rgb: var(--primary-rgb);
  --earth-brown:      #006D2C;
  --earth-brown-rgb:  0, 109, 44;
  --sand-beige:       #F7FCF5;
  --sand-beige-rgb:   247, 252, 245;
  --sunset-gold:      #41AB5D;
  --sunset-gold-rgb:  65, 171, 93;
  --sky-blue:         #74C476;
  --sky-blue-rgb:     116, 196, 118;
  --charcoal:         #00441B;
  --charcoal-rgb:     0, 68, 27;

  /* ——— Primary Forest Green Scale (from image) ——— */
  --primary-50:  #F7FCF5;
  --primary-100: #E5F5E0;
  --primary-200: #C7E9C0;
  --primary-300: #A1D99B;
  --primary-400: #74C476;
  --primary-500: #41AB5D;
  --primary-600: #238B45;
  --primary-700: #006D2C;
  --primary-800: #00441B;
  --primary-900: #002710;

  --forest-50:  var(--primary-50);
  --forest-100: var(--primary-100);
  --forest-200: var(--primary-200);
  --forest-300: var(--primary-300);
  --forest-400: var(--primary-400);
  --forest-500: var(--primary-500);
  --forest-600: var(--primary-600);
  --forest-700: var(--primary-700);
  --forest-800: var(--primary-800);
  --forest-900: var(--primary-900);

  /* ——— Accent (Fern Green Scale) ——— */
  --gold-50:  #F7FCF5;
  --gold-100: #E5F5E0;
  --gold-200: #C7E9C0;
  --gold-300: #A1D99B;
  --gold-400: #74C476;
  --gold-500: #41AB5D;
  --gold-600: #238B45;
  --gold-700: #006D2C;
  --gold-800: #005722;
  --gold-900: #00441B;

  /* ——— Accent Aliases (Legacy compat — mapped to green) ——— */
  --gold:             #238B45;
  --gold-light:       #41AB5D;
  --gold-dark:        #006D2C;
  --gold-subtle:      rgba(35, 139, 69, 0.08);
  --gold-border:      rgba(35, 139, 69, 0.25);
  --gold-border-hover:rgba(35, 139, 69, 0.50);

  /* ——— Background Scale ——— */
  --bg-deepest:      var(--primary-700);
  --bg-base:         #F7FCF5;
  --bg-raised:       #FAFFF8;
  --bg-card:         #EDF7EA;
  --bg-card-premium: var(--primary-700);
  --bg-hover:        #DFF0DA;
  --bg-surface:      #F7FCF5;
  --bg-overlay:      rgba(0, 68, 27, 0.75);

  /* ——— Cream/Green Section Tokens (Legacy compat) ——— */
  --bg-cream:        #F7FCF5;
  --bg-cream-dark:   #E5F5E0;
  --bg-cream-card:   #EDF7EA;
  --text-on-cream:       #00441B;
  --text-secondary-on-cream: #1A5C33;
  --text-muted-on-cream:     #4A8C5C;
  --border-on-cream:   rgba(0, 109, 44, 0.12);
  --gold-border-on-cream: rgba(35, 139, 69, 0.20);

  /* ——— Text Scale ——— */
  --text-primary:    #00441B;
  --text-secondary:  #1A5C33;
  --text-muted:      #4A8C5C;
  --text-gold:       #238B45;
  --text-white:      #F7FCF5;
  --text-on-dark:    #F7FCF5;

  /* ——— Border / Divider ——— */
  --border-subtle:   rgba(0, 109, 44, 0.08);
  --border-medium:   rgba(0, 109, 44, 0.15);
  --border-strong:   rgba(0, 109, 44, 0.28);

  /* ——— Glass / Card Effects ——— */
  --glass-dark:      rgba(0, 68, 27, 0.06);
  --glass-dark-hover:rgba(0, 68, 27, 0.12);
  --glass-gold:      rgba(35, 139, 69, 0.06);
  --glass-shadow:    0 8px 32px rgba(0, 68, 27, 0.14);

  /* ——— Navbar Glass ——— */
  --navbar-glass-bg: rgba(0, 68, 27, 0.55);

  /* ——— Legacy aliases (compatibility) ——— */
  --midnight-navy:        var(--bg-base);
  --midnight-navy-rgb:    247, 252, 245;
  --glacier-blue:         var(--gold);
  --glacier-blue-rgb:     35, 139, 69;
  --snow-white:           var(--text-primary);
  --snow-white-rgb:       0, 68, 27;
  --mountain-gray:        var(--text-secondary);
  --mountain-gray-rgb:    26, 92, 51;
  --deep-navy:            var(--bg-raised);
  --dark-slate:           var(--bg-card);
  --ice-blue:             var(--sky-blue);
  --warm-gold:            var(--gold);
  --sunset-amber:         #238B45;
  --alpine-white:         var(--text-primary);
  --charcoal-hex:         var(--charcoal);
  --storm-gray:           var(--text-muted);
  --soft-navy:            var(--bg-raised);
  --forest:               var(--forest-green);
  --forest-rgb:           var(--forest-green-rgb);
  --earth:                var(--earth-brown);
  --sand:                 var(--sand-beige);
  --gold-accent:          var(--sunset-gold);
  --sky:                  var(--sky-blue);
  --charcoal-deep:        var(--charcoal);

  /* ——— Gradients ——— */
  --gradient-premium:      linear-gradient(135deg, #00441B, #006D2C);
  --gradient-hero-overlay: linear-gradient(180deg,
      rgba(0, 68, 27, 0.45) 0%,
      rgba(0, 68, 27, 0.15) 40%,
      rgba(0, 68, 27, 0.78) 100%);
  --gradient-card:         linear-gradient(145deg, #E5F5E0, #F7FCF5);
  --gradient-glacier:      linear-gradient(135deg, var(--gold-dark), var(--gold));
  --gradient-forest:       linear-gradient(135deg, #00441B, #238B45);
  --gradient-winter:       linear-gradient(180deg, #F7FCF5 0%, #E5F5E0 100%);
  --gradient-summer:       linear-gradient(180deg, #E5F5E0 0%, #F7FCF5 100%);
  --gradient-text:         linear-gradient(135deg, #00441B, #41AB5D);
  --gradient-gold-shine:   linear-gradient(90deg,
      transparent, rgba(35, 139, 69, 0.12), transparent);

  /* ——— Glass Effects ——— */
  --glass-bg:          rgba(255, 255, 255, 0.80);
  --glass-bg-light:    rgba(255, 255, 255, 0.60);
  --glass-border:      rgba(0, 109, 44, 0.12);
  --glass-border-hover:rgba(0, 109, 44, 0.25);

  /* ——— Section shadows ——— */
  --section-overlap:    clamp(54px, 8vw, 118px);
  --section-lift-shadow: 0 -20px 60px rgba(35, 139, 69, 0.04), 0 20px 60px rgba(35, 139, 69, 0.04);

  /* ——— Typography ——— */
  --font-logo:     'Cormorant Garamond', Georgia, serif;
  --font-heading:  'Manrope', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-accent:   'Inter', system-ui, sans-serif;
  --font-serif:    'Manrope', system-ui, sans-serif;
  --font-display:  'Manrope', system-ui, sans-serif;
  --font-caption:  'Inter', system-ui, sans-serif;

  /* Type Scale */
  --text-xs:   clamp(0.7rem,  0.8vw,  0.75rem);
  --text-sm:   clamp(0.8rem,  0.9vw,  0.875rem);
  --text-base: clamp(0.9rem,  1vw,    1rem);
  --text-lg:   clamp(1rem,    1.15vw, 1.125rem);
  --text-xl:   clamp(1.1rem,  1.3vw,  1.25rem);
  --text-2xl:  clamp(1.3rem,  1.6vw,  1.5rem);
  --text-3xl:  clamp(1.6rem,  2.2vw,  1.875rem);
  --text-4xl:  clamp(2rem,    3vw,    2.5rem);
  --text-5xl:  clamp(2.5rem,  4vw,    3.5rem);
  --text-6xl:  clamp(3rem,    5.5vw,  4.5rem);
  --text-7xl:  clamp(3.5rem,  7vw,    6rem);

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

  /* Line Heights */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter Spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.2em;

  /* ——— 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;
  --space-40: 10rem;
  --space-section: clamp(5rem, 10vh, 8rem);

  /* ——— Layout ——— */
  --container-max:    1400px;
  --container-wide:   1600px;
  --container-narrow: 900px;
  --container-padding: clamp(1.5rem, 4vw, 4rem);

  /* ——— Borders & Radius ——— */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ——— Shadows (Forest Green Tone) ——— */
  --shadow-sm:          0 2px 8px rgba(35, 139, 69, 0.06);
  --shadow-md:          0 4px 16px rgba(35, 139, 69, 0.08);
  --shadow-lg:          0 8px 30px rgba(35, 139, 69, 0.10);
  --shadow-xl:          0 16px 48px rgba(35, 139, 69, 0.12);
  --shadow-glow:        0 0 24px rgba(65, 171, 93, 0.18);
  --shadow-glow-strong: 0 0 40px rgba(65, 171, 93, 0.28);
  --shadow-gold:        0 4px 20px rgba(35, 139, 69, 0.22);

  /* ——— Semantic Status Colors ——— */
  --color-success:  #238B45;
  --color-warning:  #E6A817;
  --color-danger:   #C0392B;
  --color-info:     #1A6B4A;

  /* ——— Transitions ——— */
  --ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:    0.2s;
  --duration-normal:  0.4s;
  --duration-slow:    0.6s;
  --duration-slower:  0.8s;
  --duration-slowest: 1.2s;

  /* ——— Smooth Color Transitions (Phase 7) ——— */
  --transition-color: background-color 0.3s ease, color 0.3s ease,
                      border-color 0.3s ease, box-shadow 0.3s ease;

  /* ——— Z-Index Scale ——— */
  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-navbar:     500;
  --z-overlay:    600;
  --z-modal:      700;
  --z-toast:      800;
  --z-particles:  50;
  --z-loader:     9999;
}

/* ===== Dark Mode Architecture (Phase 8) =====
   Add [data-theme="dark"] to <html> to activate.
   ============================================= */
[data-theme="dark"] {
  --primary:         #41AB5D;
  --forest-green:    var(--primary);
  --sand-beige:      #0D1F12;
  --sand-beige-rgb:  13, 31, 18;
  --charcoal:        #E5F5E0;
  --charcoal-rgb:    229, 245, 224;

  --bg-deepest:      #00250E;
  --bg-base:         #0D1F12;
  --bg-raised:       #122718;
  --bg-card:         #1A3520;
  --bg-hover:        #1F3D25;
  --bg-surface:      #0D1F12;
  --bg-overlay:      rgba(0, 37, 14, 0.85);

  --text-primary:    #E5F5E0;
  --text-secondary:  #A1D99B;
  --text-muted:      #74C476;

  --border-subtle:   rgba(65, 171, 93, 0.08);
  --border-medium:   rgba(65, 171, 93, 0.15);
  --border-strong:   rgba(65, 171, 93, 0.28);

  --gold:            #74C476;
  --gold-light:      #A1D99B;
  --gold-dark:       #41AB5D;
  --gold-border:     rgba(116, 196, 118, 0.25);
  --gold-subtle:     rgba(116, 196, 118, 0.08);

  --shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md:       0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg:       0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-xl:       0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-glow:     0 0 24px rgba(116, 196, 118, 0.20);
  --shadow-gold:     0 4px 20px rgba(116, 196, 118, 0.25);

  --glass-bg:        rgba(13, 31, 18, 0.85);
  --glass-border:    rgba(65, 171, 93, 0.15);
}