/* ============================================================================
   Dakshin Vrindavan Trust — design tokens
   Real palette sampled from live site DOM (getComputedStyle, 2026-04-29).
   This file is the single source of truth for colours, type, spacing, motion.
   ========================================================================= */
:root {
  /* Brand — exact values pulled from current site */
  --c-saffron:        #EAAF00;          /* primary CTA / accent */
  --c-saffron-deep:   #B68900;          /* hover / pressed / large numerals */
  --c-saffron-text:   #8A6800;          /* AA-safe small accent / eyebrow text on cream (5.0:1) */
  --c-saffron-soft:   #FFF4D6;          /* tints + section bg */
  --c-gold:           #D4A24C;          /* premium / patron accent */
  --c-gold-soft:      #FAF1DC;
  --c-ink:            #232220;          /* dark band bg, footers, headlines on light */
  --c-ink-soft:       #5C544A;          /* secondary text */
  --c-text:           #444444;          /* body text (slightly stronger than the live #666 for AAA) */
  --c-muted:          #6B7280;
  --c-rule:           #E9DFD0;          /* dividers */
  --c-cream:          #FDFBF6;          /* alternating section bg */
  --c-white:          #FFFFFF;
  --c-success:        #2D7A4F;          /* trust badges */
  --c-success-soft:   #E8F3EC;
  --c-danger:         #B14A00;

  /* Typography */
  --font-display: "Oswald", "Trebuchet MS", "Arial Narrow", sans-serif;
  --font-body:    "Mukta", "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent:  "Lora", "Georgia", serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", monospace;

  /* Fluid type scale (clamp for responsive without media queries) */
  --fs-xs:   clamp(11px, .72rem + .1vw, 12px);
  --fs-sm:   clamp(13px, .82rem + .1vw, 14px);
  --fs-base: clamp(15px, .94rem + .15vw, 16px);
  --fs-md:   clamp(16px, 1rem + .25vw, 18px);
  --fs-lg:   clamp(18px, 1.05rem + .35vw, 21px);
  --fs-xl:   clamp(22px, 1.2rem + .8vw, 28px);
  --fs-h3:   clamp(20px, 1.1rem + .9vw, 26px);
  --fs-h2:   clamp(26px, 1.4rem + 1.4vw, 38px);
  --fs-h1:   clamp(32px, 1.6rem + 2.5vw, 56px);
  --fs-hero: clamp(34px, 1.6rem + 3.4vw, 64px);

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Radii + shadows */
  --r-sm: 8px;  --r-md: 14px; --r-lg: 24px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(35,34,32,.04), 0 4px 10px rgba(35,34,32,.04);
  --shadow-md: 0 1px 2px rgba(35,34,32,.04), 0 12px 28px rgba(35,34,32,.06);
  --shadow-lg: 0 4px 14px rgba(35,34,32,.08), 0 24px 48px rgba(35,34,32,.10);

  /* Layout */
  --container: 1180px;
  --container-narrow: 880px;
  --header-h: 72px;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --d-fast: .15s;
  --d-base: .25s;
  --d-slow: .4s;

  /* ==========================================================================
     PREMIUM ELEVATION LAYER  (added 2026-05-12)
     Saffron-led premium palette. Saffron stays the sacred primary; nature
     green + earth brown + cream/gold become a cohesive supporting palette
     that evokes a gaushala — pasture, soil, and the reverence of saffron.
     Everything below is ADDITIVE: no existing token value is changed, so the
     donor portal (which shares this file but is out of scope) is visually
     untouched. premium.css consumes these tokens; site.css does not depend
     on them, so the base experience degrades gracefully if premium.css fails
     to load.
     ====================================================================== */

  /* ── Supporting palette · Nature green (life, growth, eco, transparency) ── */
  --c-forest:      #1F5C3D;   /* deep forest — eco headings, nature accent on light */
  --c-leaf:        #3E8E5A;   /* mid leaf — growth accent, nature CTAs */
  --c-leaf-soft:   #E7F2EA;   /* soft green tint — alternating section bg */
  --c-moss:        #6FA77E;   /* muted moss — subtle dividers / icons */

  /* ── Supporting palette · Earth brown (grounding, warmth, soil) ────────── */
  --c-earth:       #6B4A2B;   /* rich earth — secondary headings, grounding */
  --c-earth-soft:  #F2E9DE;   /* soft sand — alternating section bg */
  --c-bark:        #4A3420;   /* deep bark — darkest warm neutral */

  /* ── Status (success already defined above) ────────────────────────────── */
  --c-warning:      #C8860D;
  --c-warning-soft: #FCEFD2;
  --c-error:        #B23A2E;
  --c-error-soft:   #FBEAE7;

  /* ── Premium gradients ─────────────────────────────────────────────────── */
  --grad-saffron:      linear-gradient(135deg, #F5C518 0%, #EAAF00 45%, #B68900 100%);
  --grad-saffron-soft: linear-gradient(135deg, #FFF7E0 0%, #FCEEC4 100%);
  --grad-gold:         linear-gradient(135deg, #E8C977 0%, #D4A24C 100%);
  --grad-nature:       linear-gradient(135deg, #4AA268 0%, #1F5C3D 100%);
  --grad-warm:         linear-gradient(135deg, #FFF4D6 0%, #FAF1DC 50%, #F2E9DE 100%);
  --grad-ink:          linear-gradient(160deg, #2C2A27 0%, #232220 55%, #1A1815 100%);
  --grad-ink-saffron:  linear-gradient(150deg, #2C2A27 0%, #232220 55%, #3A2E12 100%);
  /* Bottom-up scrim that keeps white hero text legible over photos */
  --grad-hero-scrim:   linear-gradient(180deg, rgba(26,24,21,0) 0%, rgba(26,24,21,.12) 38%, rgba(26,24,21,.55) 72%, rgba(26,24,21,.82) 100%);
  /* Diagonal light sweep used for the button sheen micro-interaction */
  --grad-sheen:        linear-gradient(110deg, transparent 28%, rgba(255,255,255,.5) 48%, transparent 68%);

  /* ── Glassmorphism ─────────────────────────────────────────────────────── */
  --glass-bg:          rgba(255,255,255,.72);
  --glass-bg-strong:   rgba(255,255,255,.86);
  --glass-bg-dark:     rgba(35,34,32,.55);
  --glass-border:      rgba(255,255,255,.55);
  --glass-border-dark: rgba(255,255,255,.14);
  --blur:              14px;
  --blur-strong:       22px;

  /* ── Premium shadow scale (softer, layered, brand-tinted glows) ────────── */
  --shadow-xs:           0 1px 2px rgba(35,34,32,.05);
  --shadow-card:         0 1px 2px rgba(35,34,32,.04), 0 10px 30px rgba(35,34,32,.07);
  --shadow-card-hover:   0 6px 16px rgba(35,34,32,.10), 0 24px 56px rgba(35,34,32,.14);
  --shadow-float:        0 12px 32px rgba(35,34,32,.16), 0 32px 64px rgba(35,34,32,.18);
  --shadow-glow-saffron: 0 8px 26px rgba(234,175,0,.32), 0 2px 8px rgba(234,175,0,.18);
  --shadow-glow-green:   0 8px 26px rgba(62,142,90,.24);

  /* ── Extended radii ────────────────────────────────────────────────────── */
  --r-xs:  6px;
  --r-xl:  32px;
  --r-2xl: 40px;

  /* ── Premium typography tuning ─────────────────────────────────────────── */
  --tracking-tight:   -.02em;
  --tracking-snug:    -.01em;
  --tracking-wide:     .06em;
  --tracking-eyebrow:  .14em;
  --leading-tight:    1.12;
  --leading-snug:     1.3;
  --leading-relaxed:  1.65;

  /* ── Focus ring (brand-tinted, AA-visible on light + dark) ─────────────── */
  --focus-ring: 0 0 0 3px rgba(234,175,0,.45), 0 0 0 5px rgba(35,34,32,.14);

  /* ── Premium easings + reveal duration ─────────────────────────────────── */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --d-reveal:      .7s;
}

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