/* ===========================================================
   Dharma Wellness Institute — design tokens
   Light theme only.

   SOURCES (all values derived from these, nothing else):
   - brand-voice.md "Visual Identity": earth tones — sage green, warm cream,
     soft gold, muted clay; clean airy typography, generous spacing;
     lotus/logo motif.
   - Website/meditation-app.html: fonts already chosen for the brand —
     Cormorant Garamond (display, 300/400/500 + italics) and DM Sans
     (body, 400/500) via Google Fonts.
   - Assets/Logos/favicon.svg: mark uses #8fad70 / #7da060 greens and warm
     stone neutrals, which the sage/cream/clay picks sit alongside.

   WCAG AA checks (computed 2026-09-08, 4.5:1 minimum for body text):
     ink #2B2A26      on cream #F6F1E7  12.76  pass
     ink-muted #5E5B54 on cream #F6F1E7   6.02  pass
     ink #2B2A26      on white #FFFFFF  14.36  pass
     white #FFFFFF    on sage #5B7355     5.21  pass  (primary buttons)
     white #FFFFFF    on sage-deep #485C43 7.27 pass  (button hover)
     sage #5B7355     on cream #F6F1E7    4.63  pass  (links)
     sage-deep #485C43 on cream #F6F1E7   6.46  pass
     clay-deep #8F553D on cream #F6F1E7   5.28  pass  (accent text)
     gold-text #7A5C1C on cream #F6F1E7   5.53  pass  (accent text)
     white #FFFFFF    on clay-deep #8F553D 5.94 pass  (secondary buttons)
   Decorative only (below 4.5:1 — never use for text on cream):
     clay #A9694E (3.87), gold #B8923F (2.58), sage-soft #8FA88A.
   =========================================================== */

:root {
  /* --- Palette --- */
  --sage:        #5B7355;   /* primary: buttons, links, headings accent */
  --sage-deep:   #485C43;   /* hover / active */
  --sage-soft:   #8FA88A;   /* decorative: rules, icons, borders */
  --sage-pale:   #E6ECE2;   /* tinted section backgrounds */

  --cream:       #F6F1E7;   /* page background (warm cream) */
  --cream-deep:  #EDE5D6;   /* cards, alternate sections */
  --white:       #FFFFFF;

  --gold:        #B8923F;   /* soft gold — decorative accents, hairlines */
  --gold-text:   #7A5C1C;   /* gold that passes AA as text on cream */

  --clay:        #A9694E;   /* muted clay — decorative accents */
  --clay-deep:   #8F553D;   /* clay that passes AA as text / secondary button */

  --ink:         #2B2A26;   /* body text */
  --ink-muted:   #5E5B54;   /* secondary text, captions */
  --rule:        #D9D2C3;   /* hairlines, borders */

  /* Semantic aliases */
  --color-bg:        var(--cream);
  --color-surface:   var(--white);
  --color-text:      var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-link:      var(--sage);
  --color-link-hover: var(--sage-deep);
  --color-border:    var(--rule);
  --color-focus:     var(--gold-text);

  /* --- Typography --- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --text-xs:   0.8125rem;  /* 13px */
  --text-sm:   0.9375rem;  /* 15px */
  --text-base: 1.0625rem;  /* 17px */
  --text-md:   1.25rem;    /* 20px */
  --text-lg:   1.5rem;     /* 24px */
  --text-xl:   2rem;       /* 32px */
  --text-2xl:  2.75rem;    /* 44px */
  --text-3xl:  3.5rem;     /* 56px */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.7;

  --tracking-caps: 0.14em;

  /* --- Spacing scale (generous, per brand-voice "airy") --- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 1rem;      /* 16px */
  --space-4: 1.5rem;    /* 24px */
  --space-5: 2.5rem;    /* 40px */
  --space-6: 4rem;      /* 64px */
  --space-7: 6rem;      /* 96px */
  --space-8: 8rem;      /* 128px */

  /* --- Layout --- */
  --maxw:        1120px;
  --maxw-narrow: 720px;   /* prose measure */
  --maxw-wide:   1320px;
  --gutter:      var(--space-4);

  /* --- Radii --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* --- Elevation --- */
  --shadow-sm: 0 1px 2px rgba(43, 42, 38, 0.06);
  --shadow-md: 0 6px 24px rgba(43, 42, 38, 0.08);

  /* --- Motion --- */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 220ms;
}