/* ============================================
   IMAGINARYINCH — Design Tokens
   Agent: Aria (Design Lead)
   ============================================ */

:root {
  /* ---- Color Palette: Premium Green ---- */
  --clr-forest:      #1B3A2D;
  --clr-forest-rgb:  27, 58, 45;
  --clr-emerald:     #2E7D5B;
  --clr-emerald-rgb: 46, 125, 91;
  --clr-sage:        #7DA68A;
  --clr-sage-rgb:    125, 166, 138;
  --clr-pistachio:   #B8D4BF;
  --clr-pistachio-rgb: 184, 212, 191;
  --clr-ivory:       #F5F1EB;
  --clr-ivory-rgb:   245, 241, 235;
  --clr-cream:       #FAF8F5;
  --clr-cream-rgb:   250, 248, 245;
  --clr-white:       #FFFFFF;
  --clr-white-rgb:   255, 255, 255;
  --clr-charcoal:    #1A1A1A;
  --clr-charcoal-rgb: 26, 26, 26;
  --clr-gold:        #C9A96E;
  --clr-gold-rgb:    201, 169, 110;
  --clr-dark-overlay: rgba(27, 58, 45, 0.85);

  /* ---- Typography ---- */
  --ff-display:  'Playfair Display', 'Georgia', serif;
  --ff-body:     'Inter', 'Segoe UI', sans-serif;
  --ff-accent:   'Cormorant Garamond', 'Georgia', serif;

  --fs-hero:     clamp(3rem, 8vw, 7rem);
  --fs-hero-sub: clamp(1.2rem, 2.5vw, 2rem);
  --fs-h1:       clamp(2.5rem, 5vw, 4.5rem);
  --fs-h2:       clamp(2rem, 4vw, 3.5rem);
  --fs-h3:       clamp(1.5rem, 3vw, 2rem);
  --fs-h4:       clamp(1.1rem, 2vw, 1.5rem);
  --fs-body:     clamp(1rem, 1.2vw, 1.125rem);
  --fs-small:    clamp(0.85rem, 1vw, 0.95rem);
  --fs-nav:      0.875rem;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:    1.1;
  --lh-heading:  1.2;
  --lh-body:     1.7;
  --ls-wide:     0.15em;
  --ls-wider:    0.25em;

  /* ---- Spacing ---- */
  --sp-xs:   0.5rem;
  --sp-sm:   1rem;
  --sp-md:   1.5rem;
  --sp-lg:   2.5rem;
  --sp-xl:   4rem;
  --sp-2xl:  6rem;
  --sp-3xl:  8rem;
  --sp-4xl:  12rem;

  --section-padding: clamp(4rem, 10vh, 8rem) clamp(1.5rem, 5vw, 6rem);

  /* ---- Layout ---- */
  --max-width:   1400px;
  --nav-height:  80px;

  /* ---- Borders & Radius ---- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:   0 2px 8px rgba(27, 58, 45, 0.06);
  --shadow-md:   0 4px 20px rgba(27, 58, 45, 0.1);
  --shadow-lg:   0 8px 40px rgba(27, 58, 45, 0.15);
  --shadow-gold: 0 4px 20px rgba(201, 169, 110, 0.25);

  /* ---- Glass Effect ---- */
  --glass-bg:    rgba(27, 58, 45, 0.6);
  --glass-blur:  20px;
  --glass-border: rgba(255, 255, 255, 0.08);

  /* ---- Transitions ---- */
  --ease-smooth:   cubic-bezier(0.23, 1, 0.32, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      0.2s;
  --dur-normal:    0.4s;
  --dur-slow:      0.8s;
  --dur-slower:    1.2s;

  /* ---- Z-Index Scale ---- */
  --z-base:      1;
  --z-above:     10;
  --z-nav:       100;
  --z-overlay:   500;
  --z-modal:     1000;
  --z-toast:     2000;
}