/* ==========================================================================
   NAYI — New Age Yoga Institute · Design Tokens
   Palette derived directly from the brand logo:
   · Leaf/olive green (meditating figure)  → Sage primary scale
   · Marigold-gold sun                     → Gold accent scale
   · Brick/terracotta wordmark             → Terracotta secondary
   · Charcoal "INSTITUTE"                  → Ink neutrals
   Luxury-wellness direction: deep sage + warm ivory + gold + terracotta.
   ========================================================================== */

:root {
  /* ---- Brand: Forest green (primary) — new template palette ---- */
  --sage-50:  #eef3e6;
  --sage-100: #dce7cd;
  --sage-200: #bcd0a4;
  --sage-300: #92b377;
  --sage-400: #5e8a55;
  --sage-500: #2f5d3f;   /* mid green */
  --sage-600: #1e4733;
  --sage-700: #142d26;   /* deep forest — primary (template --green) */
  --sage-800: #0f241d;
  --sage-900: #0d201b;   /* template --dark */

  /* ---- Brand: Lime (accent / highlight) ---- */
  --gold-50:  #f5f8e4;
  --gold-100: #eaf2c6;
  --gold-200: #dcea9f;
  --gold-300: #d2e585;
  --gold-400: #f4cd42;   /* sun — warm highlight */
  --gold-500: #c3dc50;   /* signature lime (template --lime) */
  --gold-600: #a7c23a;
  --gold-700: #879e2c;

  /* ---- Brand: Red/brick (secondary) ---- */
  --terra-100: #f1dbd5;
  --terra-300: #dba093;
  --terra-500: #b74132;  /* template --red */
  --terra-600: #9c3729;
  --terra-700: #7f2d22;

  /* ---- Neutrals (paper → ink green-black) ---- */
  --ivory-50:  #faf9f4;
  --ivory-100: #f6f5ef;  /* template --paper */
  --ivory-200: #ebe9dd;
  --ivory-300: #d7ddcf;  /* template --line */
  --clay-400:  #b7bda9;
  --clay-500:  #8b9282;
  --ink-600:   #5e6a60;  /* template --muted */
  --ink-700:   #3f4a40;
  --ink-800:   #233029;
  --ink-900:   #16261f;

  /* ---- Semantic (Light theme default) ---- */
  --bg:            var(--ivory-50);
  --bg-subtle:     var(--ivory-100);
  --surface:       #ffffff;
  --surface-2:     var(--ivory-100);
  --border:        var(--ivory-300);
  --border-strong: var(--clay-400);

  --text:          var(--ink-900);
  --text-muted:    var(--ink-600);
  --text-subtle:   var(--clay-500);
  --text-invert:   var(--ivory-50);

  --primary:       var(--sage-700);
  --primary-hover: var(--sage-800);
  --primary-soft:  var(--sage-100);
  --on-primary:    #ffffff;

  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-600);
  --accent-soft:   var(--gold-50);
  --on-accent:     var(--ink-900);

  --secondary:     var(--terra-500);
  --secondary-soft:var(--terra-100);

  --success: #3f7d4e;
  --warning: var(--gold-500);
  --danger:  #b23a2e;
  --info:    #3f6d7d;

  /* ---- Glassmorphism ---- */
  --glass-bg:      rgba(250, 247, 240, 0.62);
  --glass-bg-dark: rgba(26, 25, 21, 0.55);
  --glass-border:  rgba(255, 255, 255, 0.55);
  --glass-blur:    16px;

  /* ---- Gradients ---- */
  --grad-hero:  radial-gradient(120% 120% at 80% 0%, var(--sage-100) 0%, var(--ivory-50) 42%, var(--ivory-100) 100%);
  --grad-sage:  linear-gradient(135deg, var(--sage-600), var(--sage-800));
  --grad-gold:  linear-gradient(135deg, var(--gold-300), var(--gold-500));
  --grad-warm:  linear-gradient(135deg, var(--gold-100), var(--terra-100));
  --grad-cta:   linear-gradient(135deg, #1b3a2e 0%, #142d26 52%, #0d201b 100%);

  /* ---- Typography (new template: DM Sans body, Manrope UI, Instrument Serif display) ---- */
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-deva: 'Noto Sans Devanagari', var(--font-body); /* Hindi content */

  --fs-display: clamp(2.75rem, 1.6rem + 5.4vw, 5rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3.4vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 2.2vw, 2.6rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;
  --fs-eyebrow: 0.8rem;

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-body: 1.65;
  --tracking-eyebrow: 0.18em;
  --tracking-tight: -0.02em;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;   --sp-12: 6rem;   --sp-16: 8rem;
  --container: 1200px;
  --container-wide: 1360px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --section-y: clamp(2.75rem, 1.75rem + 3.8vw, 5rem);

  /* ---- Radii ---- */
  --r-sm: 8px;  --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-2xl: 44px;
  --r-pill: 999px;

  /* ---- Shadows (soft, layered) ---- */
  --sh-xs: 0 1px 2px rgba(41, 52, 31, 0.06);
  --sh-sm: 0 2px 8px rgba(41, 52, 31, 0.07);
  --sh-md: 0 8px 24px rgba(41, 52, 31, 0.09);
  --sh-lg: 0 18px 48px rgba(41, 52, 31, 0.13);
  --sh-xl: 0 30px 80px rgba(41, 52, 31, 0.18);
  --sh-gold: 0 12px 34px rgba(200, 150, 30, 0.28);
  --ring: 0 0 0 3px rgba(110, 139, 67, 0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.18s; --dur-2: 0.32s; --dur-3: 0.6s; --dur-4: 0.9s;

  --z-nav: 100; --z-modal: 200; --z-toast: 300;
  color-scheme: light;
}

/* ============================ DARK THEME ============================ */
:root[data-theme="dark"] {
  --bg:            #14150f;
  --bg-subtle:     #191a12;
  --surface:       #1e1f16;
  --surface-2:     #24261b;
  --border:        #33352a;
  --border-strong: #474a3a;

  --text:          #ecead9;
  --text-muted:    #b9b6a2;
  --text-subtle:   #8f8c78;
  --text-invert:   #1a1915;

  --primary:       var(--sage-400);
  --primary-hover: var(--sage-300);
  --primary-soft:  #2b3720;
  --on-primary:    #14150f;

  --accent:        var(--gold-300);
  --accent-hover:  var(--gold-200);
  --accent-soft:   #2e2713;
  --on-accent:     #14150f;

  --secondary:     var(--terra-300);
  --secondary-soft:#33221d;

  --glass-bg:      rgba(26, 25, 21, 0.55);
  --glass-border:  rgba(255, 255, 255, 0.08);

  --grad-hero: radial-gradient(120% 120% at 80% 0%, #26301c 0%, #16170f 45%, #14150f 100%);
  --grad-cta:  linear-gradient(120deg, #2b3720 0%, #435729 55%, #7d5c17 130%);

  --sh-sm: 0 2px 8px rgba(0,0,0,0.4);
  --sh-md: 0 8px 24px rgba(0,0,0,0.5);
  --sh-lg: 0 18px 48px rgba(0,0,0,0.6);
  --ring: 0 0 0 3px rgba(139, 166, 94, 0.4);
  color-scheme: dark;
}

/* Respect OS preference when no explicit theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#14150f; --bg-subtle:#191a12; --surface:#1e1f16; --surface-2:#24261b;
    --border:#33352a; --border-strong:#474a3a; --text:#ecead9;
    --text-muted:#b9b6a2; --text-subtle:#8f8c78; --text-invert:#1a1915;
    --primary:var(--sage-400); --primary-hover:var(--sage-300); --primary-soft:#2b3720;
    --on-primary:#14150f; --accent:var(--gold-300); --accent-hover:var(--gold-200);
    --accent-soft:#2e2713; --on-accent:#14150f; --secondary:var(--terra-300);
    --glass-bg:rgba(26,25,21,0.55); --glass-border:rgba(255,255,255,0.08);
    --grad-hero:radial-gradient(120% 120% at 80% 0%, #26301c 0%, #16170f 45%, #14150f 100%);
    color-scheme: dark;
  }
}