/* =========================================================================
   Ravia — design tokens (Grayskills · Website › Yoga & Wellness)
   Every design value lives here. Components never hard-code a colour.
   ========================================================================= */
:root {
  /* ---- surfaces ---- */
  --paper: #FFFFFF;            /* page */
  --mist: #F5F5F5;             /* soft grey bands, FAQ rows, inner-page nav pill */
  --card: #FFFFFF;             /* cards on mist / on photos */
  --glass: rgba(255,255,255,.8);       /* frosted service cards over a photo */
  --glass-soft: rgba(255,255,255,.4);  /* nav pill over a photo */
  --glass-dark: rgba(255,255,255,.08); /* proof pills over a dark photo fade */
  --deep: #3A0F0B;             /* footer band, dark buttons (same as ink) */
  --dawn-a: rgba(248,255,215,.8); /* about band gradient: pale lime → white → blush */
  --dawn-b: #FFD9D5;

  /* ---- text ---- */
  --ink: #3A0F0B;              /* headings, nav, strong text (deep maroon) */
  --body: #53413F;             /* paragraphs */
  --muted: #6E5E5C;            /* small meta text (4.5:1 on white) */
  --on-dark: #FFFFFF;
  --on-dark-soft: #F5F5F5;
  --on-dark-muted: rgba(245,245,245,.72);

  /* ---- lines ---- */
  --line: #E4E4E4;
  --line-soft: rgba(58,15,11,.12);
  --line-dark: rgba(255,255,255,.18);

  /* ---- brand / accent (palette engine sets these per business) ---- */
  --accent: #C54F43;           /* coral: every primary pill button, stars (source #D9665A deepened for 4.5:1 white text) */
  --on-accent: #FFFFFF;       /* text on accent */
  --accent-deep: #AE4237;      /* accent hover */
  --pop: #DEFF83;              /* lime: icon wells, the nav CTA on photo, footer chips */
  --pop-ink: #191919;          /* text on lime */
  --accent-soft: #FBE5E2;      /* tint for chips / logo pattern */

  /* ---- data / status ---- */
  --ok: #2F7D4F;
  --warn: #B7791F;
  --err: #B3261E;

  /* ---- fonts ---- */
  --font-display: "Noto Serif", Georgia, serif;   /* ExtraCondensed Light (wdth 62.5, wght 300) */
  --display-stretch: 62.5%;
  --display-weight: 300;
  --font-body: "Bricolage Grotesque", system-ui, sans-serif;

  /* ---- type scale (desktop; clamp to phone) ---- */
  --fs-h1: clamp(46px, 5.3vw, 76px);   /* hero + CTA band, lh 1.02, ls -0.02em */
  --fs-h2: clamp(38px, 4.2vw, 60px);   /* section titles, lh 1.16, ls -0.02em */
  --fs-h3: clamp(32px, 3.4vw, 48px);   /* card titles, stat numbers, lh 1.2 */
  --fs-quote: clamp(28px, 2.8vw, 40px);/* testimonial quotes, lh 1.08 */
  --fs-h4: clamp(26px, 2.3vw, 32px);   /* program titles, footer heading */
  --fs-h5: 24px;                       /* FAQ questions */
  --fs-lead: 18px;                     /* lead paragraphs, light (source 20, eased to 18) */
  --fs-body: 16px;
  --fs-eyebrow: 16px;                  /* uppercase eyebrow, lh 1.02 */
  --lh-tight: 1.02;
  --lh-title: 1.16;
  --lh-body: 1.48;
  --ls-display: -0.02em;
  --ls-body: -0.02em;

  /* ---- radii ---- */
  --r-pill: 999px;
  --r-xl: 60px;     /* frosted service cards */
  --r-lg: 48px;     /* program cards */
  --r-md: 32px;     /* big image panels */
  --r-card: 24px;   /* cards, photos, form panel */
  --r-sm: 16px;     /* FAQ rows, inner photo */
  --r-xs: 12px;     /* review chip, carousel arrows */

  /* ---- spacing / layout ---- */
  --wrap: 1480px;
  --gutter: clamp(16px, 3.75vw, 60px);
  --section: clamp(88px, 10vw, 160px);  /* section padding top/bottom */
  --head-gap: 60px;                     /* section head → content */
  --gap: 24px;
  --gap-sm: 16px;
  --nav-h: 72px;

  /* ---- shadows ---- */
  --shadow-card: 0 1px 2px rgba(58,15,11,.04), 0 12px 40px rgba(58,15,11,.06);
  --shadow-pop: 0 24px 60px rgba(31,31,31,.22);
  --blur-glass: 20px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast: .2s;
  --dur: .45s;
  --dur-slow: .9s;
}