/* =====================================================================
   tokens.css — Maya Foxten design tokens (v3: Modern Coastal Wellness)
   Palette: mist + ivory + sage + soft blue + sunlit gold accent
   Type:    Fraunces (display variable) + Manrope (body) + JetBrains Mono
   ===================================================================== */

:root {
  /* ---------- Color: Foundation neutrals ---------- */
  --mist:         #F7F8F3;   /* page-air background, lightest */
  --ivory:        #FFF8ED;   /* warm primary background */
  --pearl:        #F4EFE7;   /* secondary surface, cards */
  --sand-light:   #EADDC8;   /* warm card surface */

  /* ---------- Color: Sage greens (heart of the palette) ---------- */
  --sage:         #A8BFA3;   /* fresh sage, soft accent */
  --eucalyptus:   #6F8F7A;   /* mid-green, secondary text/borders */
  --deep-sage:    #3F5F4B;   /* heading green, footer */
  --mid-sage:     #2F4A39;   /* footer gradient stop */

  /* ---------- Color: Soft blues (calm-practice + ritual rooms) ---------- */
  --sky-soft:     #D8EEF2;
  --blue-mist:    #BFDDE5;
  --coastal-blue: #7EADB8;

  /* ---------- Color: Warmth accents (sensual, sparing) ---------- */
  --blush:        #F4C9C2;
  --rose-sand:    #DDA89B;

  /* ---------- Color: Gold (premium accent, CTA highlight) ---------- */
  --champagne:    #D7B76D;
  --soft-gold:    #C9A85A;
  --sunlit-gold:  #E5C878;

  /* ---------- Color: Ink (greens, not browns) ---------- */
  --charcoal-green: #1E3026;   /* body text, dark surfaces */
  --ink-soft:       #26352D;
  --text-muted:     #6F7B6E;

  /* ---------- Studio palette (slightly cooler, modern) ---------- */
  --studio-bg:    #F0EFE9;
  --studio-ink:   #1E3026;
  --mono-mist:    #E6EBE3;

  /* ---------- Premium tier (Phase 2+ /private gateway) ---------- */
  --noir:         #131A15;
  --gold:         var(--soft-gold);
  --bone:         var(--ivory);

  /* ---------- Functional ---------- */
  --success:      var(--eucalyptus);
  --warn:         var(--champagne);
  --error:        #C9826B;
  --grey:         #9AA199;
  --grey-soft:    #C9CFC4;

  /* ---------- Surface aliases ---------- */
  --bg:           var(--mist);
  --bg-deep:      var(--pearl);
  --surface:      #ffffff;
  --text:         var(--charcoal-green);
  --text-soft:    var(--ink-soft);
  --line:         rgba(30, 48, 38, 0.10);
  --line-strong:  rgba(30, 48, 38, 0.18);
  --line-gold:    rgba(201, 168, 90, 0.32);

  /* ---------- Legacy token aliases (v1/v2 compat — do not use directly in new code) ---------- */
  --cream:        var(--ivory);
  --cream-deep:   var(--pearl);
  --bark:         var(--charcoal-green);
  --bark-soft:    var(--ink-soft);
  --moss:         var(--eucalyptus);
  --moss-soft:    var(--text-muted);
  --sand:         var(--sand-light);
  --ocean:        var(--soft-gold);          /* legacy CTA color → gold */
  --ocean-soft:   var(--champagne);
  --coral:        var(--rose-sand);
  --ink:          var(--charcoal-green);
  --espresso:     var(--charcoal-green);
  --sky:          var(--sky-soft);
  --cacao:        var(--charcoal-green);
  --cacao-soft:   var(--ink-soft);
  --olive:        var(--eucalyptus);
  --olive-soft:   var(--text-muted);
  --soft-blush:   var(--blush);
  --antique-gold: var(--soft-gold);
  --bronze:       #8A6B3D;

  /* ---------- Typography: Families ---------- */
  --font-display: 'Fraunces', 'DM Serif Display', Georgia, serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;

  /* Legacy aliases */
  --font-serif:   var(--font-display);
  --font-sans:    var(--font-body);

  /* ---------- Typography: Scale ---------- */
  --fs-display:   clamp(2.75rem, 4vw + 1.5rem, 4.75rem);
  --fs-h1:        clamp(2.25rem, 2.5vw + 1.5rem, 3.5rem);
  --fs-h2:        clamp(1.875rem, 1.75vw + 1.25rem, 2.75rem);
  --fs-h3:        clamp(1.25rem, 0.5vw + 1.125rem, 1.75rem);
  --fs-lede:      clamp(1.125rem, 0.5vw + 1rem, 1.4rem);
  --fs-body-lg:   1.125rem;
  --fs-body:      1rem;
  --fs-small:     0.875rem;
  --fs-label:     0.75rem;
  --fs-mini:      0.6875rem;

  --lh-tight:     1.05;
  --lh-snug:      1.15;
  --lh-base:      1.7;        /* body line-height — slightly more breathing room */
  --lh-relaxed:   1.85;

  --tracking-tight:    -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-label:    0.16em;

  /* Fraunces variation axes */
  --fraunces-soft:  50;
  --fraunces-wonk:  0;

  /* ---------- Spacing (8pt grid) ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;

  --section-y:        clamp(3rem, 4vw + 2rem, 6.5rem);
  --section-y-tight:  clamp(2rem, 2vw + 1.5rem, 3.5rem);

  /* ---------- Layout ---------- */
  --container:        1200px;
  --container-narrow: 720px;
  --container-wide:   1440px;
  --gutter:           clamp(1rem, 4vw, 2rem);

  /* ---------- Radius ---------- */
  --radius-xs:    4px;
  --radius-sm:    10px;
  --radius-md:    14px;
  --radius-lg:    22px;
  --radius-xl:    32px;
  --radius-pill:  999px;

  /* ---------- Borders ---------- */
  --border-hair:  1px solid var(--line);
  --border-soft:  1.5px solid var(--line-strong);
  --border-sage:  1.5px solid rgba(63, 95, 75, 0.32);
  --border-gold:  1px solid var(--line-gold);

  /* ---------- Shadows ---------- */
  --shadow-xs:    0 1px 1px rgba(30, 48, 38, 0.04);
  --shadow-sm:    0 6px 18px rgba(30, 48, 38, 0.06);
  --shadow-md:    0 18px 60px rgba(30, 48, 38, 0.08);
  --shadow-lg:    0 28px 80px rgba(30, 48, 38, 0.14);
  --shadow-cta:   0 14px 40px rgba(201, 168, 90, 0.28);
  --shadow-cta-h: 0 22px 60px rgba(201, 168, 90, 0.42);
  --shadow-noir:  0 16px 40px rgba(19, 26, 21, 0.38);

  /* ---------- Motion ---------- */
  --t-fast:       120ms;
  --t-base:       250ms;
  --t-slow:       450ms;
  --t-hero:       800ms;
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.5, 0, 0.5, 1);

  /* ---------- Z-index ---------- */
  --z-base:     1;
  --z-sticky:   100;
  --z-nav:      200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* Section-scoped overrides */
[data-section="studio"] {
  --bg:        var(--studio-bg);
  --text:      var(--studio-ink);
  --text-soft: var(--text-muted);
}

[data-section="premium"] {
  --bg:        var(--noir);
  --text:      var(--bone);
  --text-soft: var(--champagne);
  --line:      rgba(215, 183, 109, 0.20);
}

[data-section="dark"] {
  --text:      var(--ivory);
  --text-soft: rgba(255, 248, 237, 0.78);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}