/* ==========================================================================
   Bedaya — tokens.css
   Single source of truth for colour, the alpha layer, type, spacing, motion.
   Built to Art-Direction v3 (§5 alpha law, §6 motion). Ports 1:1 to Webflow
   Variables (each --token -> a Webflow Variable; alpha tokens -> rgba values).
   ========================================================================== */

/* ----- Fonts (self-hosted, swap) ----------------------------------------- */
@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('../fonts/aktiv-grotesk-thin.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
/* the Bold cut is parked at 700 — nothing on the site requests it, so nothing renders bold;
   weights ≤400 resolve to the Thin cut (brand law: hierarchy from size + colour, not weight) */
@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('../fonts/aktiv-grotesk-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'RNS Sanz';
  src: url('../fonts/rns-sanz.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----- Core palette (raw) --------------------------------------------- */
  --bg: #F1F3F1;            /* pale neutral field — never stark #fff        */
  --bg-sage: #ECF4E8;       /* light sage section ground                    */
  --bg-teal: #E7F0F1;       /* light teal section ground                    */
  --bg-purple: #F0EBF5;     /* light purple section ground                  */
  --bg-ph: #E9EBEA;         /* neutral placeholder grey — no beige/brown    */
  --surface: #FBFCFB;       /* card surface — a touch above the field       */
  --text: #232323;          /* heading ink — deep charcoal                  */
  --body: #1A1A1A;          /* body copy — near-black charcoal (darker)     */
  --muted: #3A3A3A;         /* secondary body copy — dark charcoal grey     */
  --line: rgba(44, 44, 44, .08);   /* hairline borders                      */

  --purple: #926BAC;        /* primary accent / medical / CTAs / the "A"    */
  --purple-deep: #6E4F86;   /* AA-safe purple for text on pale field        */
  --sage: #A3CB91;          /* growth / wellness / success                  */
  --sage-dark: #8AAA7B;     /* deep accent, hover, dividers                 */
  --teal: #ABCFD2;          /* calm fills / pharmacy lean                   */
  --teal-deep: #5E8E92;     /* AA-safe teal for text                        */
  --wa: #25D366;            /* WhatsApp — the dock ONLY                      */

  /* ----- Alpha layer (the §5 law: brand colour ONLY as a translucent tint
     0.06–0.22, never an opaque fill) ------------------------------------- */
  --purple-06: rgba(146, 107, 172, .06);
  --purple-08: rgba(146, 107, 172, .08);
  --purple-12: rgba(146, 107, 172, .12);
  --purple-14: rgba(146, 107, 172, .14);
  --purple-16: rgba(146, 107, 172, .16);
  --purple-18: rgba(146, 107, 172, .18);
  --sage-08:  rgba(163, 203, 145, .08);
  --sage-12:  rgba(163, 203, 145, .12);
  --sage-14:  rgba(163, 203, 145, .14);
  --sage-18:  rgba(163, 203, 145, .18);
  --sage-20:  rgba(163, 203, 145, .20);
  --teal-08:  rgba(171, 207, 210, .08);
  --teal-12:  rgba(171, 207, 210, .12);
  --teal-14:  rgba(171, 207, 210, .14);
  --wa-22:    rgba(37, 211, 102, .22);
  --ink-04: rgba(44, 44, 44, .04);
  --ink-06: rgba(44, 44, 44, .06);
  --ink-08: rgba(44, 44, 44, .08);
  --ink-10: rgba(44, 44, 44, .10);
  --white-55: rgba(255, 255, 255, .55);
  --white-70: rgba(255, 255, 255, .70);

  /* ----- Glass --------------------------------------------------------- */
  --glass-bg: rgba(241, 243, 241, .55);
  --glass-bg-solid: rgba(241, 243, 241, .92);   /* @supports fallback       */
  --glass-blur: 14px;
  --glass-rim: inset 1.5px 1.5px 1px 0 rgba(255,255,255,.7),
               inset -1px -1px 1px 1px rgba(255,255,255,.5);

  /* ----- Typography ----------------------------------------------------- */
  --font-display: 'Aktiv Grotesk', system-ui, sans-serif;
  --font-body: 'Aktiv Grotesk', system-ui, sans-serif;            /* light/classy body */
  --font-ui: 'RNS Sanz', 'Aktiv Grotesk', system-ui, sans-serif;  /* small functional UI */

  --fs-display: clamp(2.75rem, 6vw, 5.25rem);
  --fs-h1:      clamp(2.25rem, 4.5vw, 3.5rem);
  --fs-h2:      clamp(1.6rem, 3vw, 2.25rem);
  --fs-h3:      1.35rem;
  --fs-body-lg: 1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.8125rem;   /* labels / eyebrows — uppercase tracked       */

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --tracking-label: 0.16em;

  /* ----- Spacing (8pt) -------------------------------------------------- */
  --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;  --s-10: 128px;

  --container: 1320px;   /* content grid matches the nav-bar width (1320) site-wide */
  --gutter: clamp(1rem, 5vw, 2rem);
  --section-y: clamp(80px, 12vh, 160px);     /* vertical section rhythm     */
  --section-y-sm: 64px;

  /* ----- Radii ---------------------------------------------------------- */
  --r-card: 20px;
  --r-sm: 12px;
  --r-pill: 999px;

  /* ----- Shadows (soft, tinted to ink, never pure black) ---------------- */
  --shadow-soft: 0 1px 2px rgba(44,44,44,.04),
                 0 8px 24px rgba(44,44,44,.06),
                 0 24px 64px rgba(44,44,44,.05);
  --shadow-lift: 0 18px 40px rgba(44,44,44,.08);
  --shadow-lift-lg: 0 22px 48px rgba(44,44,44,.10);

  /* ----- Motion (the "breathing" system, §6) ---------------------------- */
  --breathe: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 700ms;          /* default reveal / hover duration                   */
  --t-fast: 300ms;
  --t-pop: 200ms;      /* link-preview pop                                  */

  /* ----- Z-index ladder ------------------------------------------------- */
  --z-leaves: 0;
  --z-content: 2;
  --z-dock: 800;
  --z-nav: 900;
  --z-panel: 1000;
}