/* ============================================================
   VEDIC GARBH SANSKAR — DESIGN TOKENS
   Colors, type, spacing, radii, shadows
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600;1,700&family=Nunito:wght@300;400;500;600;700;800;900&family=Tiro+Devanagari+Hindi:ital@0;1&family=Tiro+Gujarati:ital@0;1&display=swap');

:root {

  /* ── PLUM (PRIMARY / SACRED) ───────────────────────────────
     Deep maroon-violet from the logo. Spiritual, premium, feminine.  */
  --plum:    #4A0E4E;   /* deep — primary, headings on light, brand */
  --plum2:   #7B1F7E;   /* rich — buttons, links, accents */
  --plum3:   #A855A8;   /* mid — gradient stop, hover glow */
  --plum4:   #D4A0D4;   /* soft — focus rings, dividers, footer accents */
  --plum5:   #F0E0F0;   /* tint — subtle backgrounds, chips */
  --plum6:   #FAF4FB;   /* whisper — page background, hero gradient */

  /* Dark text & supporting neutrals (warm violet-tinted, never pure gray) */
  --dark:    #180620;   /* body copy on light */
  --mid:     #3D1040;   /* sub-headings, muted nav */
  --muted:   #8B6E8B;   /* secondary text, captions */
  --light:   #C4A0C4;   /* disabled, hairlines */

  /* ── GOLD / SAFFRON (SACRED ACCENT) ────────────────────────
     Warm orange-gold for the heart in the logo, "om", stars, sparkles.
     Used SPARINGLY — only for highlight + festive moments.  */
  --gold:    #FF8C42;   /* saffron primary — the logo heart */
  --gold2:   #FFB347;   /* warm amber — stars, sparkles, ratings */
  --gold3:   #FFD580;   /* soft cream-gold — backgrounds, dust */

  /* ── SEMANTIC ACCENTS PER QUOTIENT ─────────────────────────
     Used for the 4 daily activities (PQ/IQ/EQ/SQ). Each pairs a soft
     gradient surface with a darker text tone for the badge.  */
  --pq-bg:    linear-gradient(160deg, #F0E0FF, #FFF0FC);
  --pq-tag:   #7B1F7E;   /* PHYSICAL — plum */
  --iq-bg:    linear-gradient(160deg, #E0F0FF, #F0FBFF);
  --iq-tag:   #1A5C8C;   /* INTELLECTUAL — blue */
  --eq-bg:    linear-gradient(160deg, #FFE8F0, #FFF5F8);
  --eq-tag:   #8C1A50;   /* EMOTIONAL — rose */
  --sq-bg:    linear-gradient(160deg, #FFF0E0, #FFFAF0);
  --sq-tag:   #7E3E00;   /* SPIRITUAL — amber */

  /* ── STATUS ────────────────────────────────────────────── */
  --success:  #16A34A;
  --whatsapp: #25D366;
  --error:    #B91C1C;

  /* ── SURFACES & STATIC GRADIENTS ──────────────────────────
     The "page" gradients used across hero, cta, app-download.  */
  --surface-page:  linear-gradient(150deg, #FAF2FD 0%, #FFF5FA 45%, #F5EEFF 100%);
  --surface-cta:   linear-gradient(145deg, #F0E0F0, #FAF4FB);
  --surface-card:  #ffffff;
  --surface-deep:  linear-gradient(135deg, #3D0A42 0%, #6B1A74 40%, #9B2DA0 100%);
  --surface-pill:  linear-gradient(135deg, #4A0E4E, #7B1F7E);

  /* ── TYPOGRAPHY ────────────────────────────────────────────
     Three families:
       — DM Serif Display: hero & section headings (sacred, editorial)
       — Cormorant Garamond: italic accents, blockquotes, avatars
       — Nunito: UI / body / buttons (warm geometric sans)
     Devanagari/Gujarati get Tiro fallbacks for proper rendering.  */
  --font-display: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif;
  --font-accent:  'Cormorant Garamond', 'DM Serif Display', Georgia, serif;
  --font-body:    'Nunito', 'Tiro Devanagari Hindi', 'Tiro Gujarati', system-ui, sans-serif;
  --font-deva:    'Tiro Devanagari Hindi', 'Nunito', system-ui, sans-serif;
  --font-guj:     'Tiro Gujarati', 'Nunito', system-ui, sans-serif;

  /* Type scale — desktop. Headings clamp on real pages. */
  --fs-display:   68px;   /* hero h1 */
  --fs-h1:        52px;   /* section title */
  --fs-h2:        38px;
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-lead:      18px;   /* hero / section subtitle */
  --fs-body:      16px;
  --fs-sm:        14px;
  --fs-xs:        12px;
  --fs-eyebrow:   11px;   /* uppercase tags above titles */

  --lh-tight:     1.12;   /* big display text */
  --lh-snug:      1.3;
  --lh-body:      1.75;   /* generous, breathable */
  --lh-loose:     2;      /* hero paragraphs */

  --ls-eyebrow:   3px;    /* tracked uppercase tag */
  --ls-tight:     -0.4px; /* large display headings */
  --ls-button:    0.3px;

  /* ── SPACING (8-pt scale) ───────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;        /* section vertical rhythm */

  /* ── RADII ─────────────────────────────────────────────────
     Brand DNA: softly rounded, never sharp.
     Pills (50px) for buttons + tags, generous (16-26px) for cards.  */
  --r-xs:   10px;
  --r-sm:   12px;
  --r-md:   16px;
  --r-lg:   20px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 9999px;

  /* ── SHADOWS ───────────────────────────────────────────────
     All shadows use plum-tinted alpha (rgba 74,14,78,a) — never grey.
     Cards lift gently; deep-purple sections cast warmer ambient shadow.  */
  --sh-xs:    0 2px 10px rgba(74, 14, 78, 0.06);
  --sh-sm:    0 4px 18px rgba(74, 14, 78, 0.07);
  --sh-md:    0 8px 28px rgba(74, 14, 78, 0.12);
  --sh-lg:    0 16px 48px rgba(74, 14, 78, 0.16);
  --sh-xl:    0 24px 60px rgba(74, 14, 78, 0.22);

  --sh-button: 0 8px 28px rgba(74, 14, 78, 0.28);   /* primary CTA */
  --sh-glow:   0 0 60px rgba(168, 85, 168, 0.45);   /* breathing glow */
  --sh-warm:   0 12px 40px rgba(255, 140, 66, 0.22); /* gold/saffron lift */

  /* ── BORDERS ─────────────────────────────────────────────── */
  --bd-soft:   1px solid rgba(168, 85, 168, 0.10);
  --bd-card:   1px solid rgba(168, 85, 168, 0.15);
  --bd-focus:  1.5px solid var(--plum2);
  --ring-focus:0 0 0 4px rgba(74, 14, 78, 0.10);

  /* ── MOTION ────────────────────────────────────────────────
     Easing: cubic-bezier(.22,1,.36,1) — slow-out, gentle.
     Avoid bounces. Pages "breathe" rather than snap.  */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quick:   200ms;
  --dur-medium:  350ms;
  --dur-slow:    700ms;
  --dur-breathe: 7s;     /* radial glow loop */
  --dur-float:   8s;     /* image float loop */
}

/* ============================================================
   SEMANTIC ROLES — drop-in element styles
   ============================================================ */

body, .vgs-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--dark);
  background: var(--plum6);
  -webkit-font-smoothing: antialiased;
}

h1, .vgs-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 5vw, var(--fs-display));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--dark);
}
h2, .vgs-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.8vw, var(--fs-h1));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--dark);
}
h3, .vgs-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--dark);
}
h4, .vgs-h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--dark);
}

.vgs-italic-em {            /* the "Happy" / "Confident" highlight */
  font-family: var(--font-display);
  font-style: italic;
  color: var(--plum2);
}
.vgs-shimmer {              /* "Confident" — gradient shimmer */
  background: linear-gradient(135deg, var(--plum2) 0%, var(--plum3) 40%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
}

.vgs-eyebrow {              /* tag above section titles */
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--plum2);
}

.vgs-lead, .vgs-ssub {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--muted);
  font-weight: 400;
}

p, .vgs-p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
}

small, .vgs-caption {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--muted);
}

a, .vgs-link {
  color: var(--plum2);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease);
}
a:hover { color: var(--plum); }