/* u-wellness brand tokens — single source of truth for the marketing site.
   Every public-facing page (landing, team, drips, legal, privacy, terms,
   how-u-iv-works, bio pages) links this file FIRST so the rest of the
   stylesheets can reference the variables.

   Internal/staff dashboards use frontend/assets/css/tokens.css (a
   different palette tuned for utility UI). Don't merge the two —
   marketing and staff are intentionally distinct surfaces.
*/
:root{
  /* u-wellness brand palette (DESIGN.md §1) */
  --uw-cream:#f5ede4; --uw-cream-deep:#ede1d1;
  --uw-terracotta:#c9623f; --uw-terracotta-soft:#e8917a;
  --uw-plum:#3d1f2e; --uw-plum-soft:#5a2e42;
  --uw-sage:#b5c0a5; --uw-moss:#5a6b4b;
  --uw-ink:#2a1620; --uw-muted:#8a7468;

  /* Surfaces */
  --bg:#f5ede4; --bg-2:#ede1d1; --surface:#fdf8f1;

  /* Type colors */
  --ink:#2a1620; --ink-2:#4a3542; --muted:#8a7468;
  --line:rgba(61,31,46,0.12);

  /* Accents */
  --accent:#c9623f; --accent-2:#e8917a;

  /* Type families */
  --serif:"Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans:"Inter", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  /* Type scale (Pouria, 2026-06-21). The ONE set of font sizes for the site —
     snap ad-hoc px values to the nearest token (half-pixels are gone). Use the
     .t-* utility classes below, or var(--fs-*) directly. */
  --fs-eyebrow:12px;  /* uppercase labels / eyebrows */
  --fs-xs:13px;       /* fine print */
  --fs-sm:14px;       /* secondary text */
  --fs-base:16px;     /* body default */
  --fs-md:18px;       /* lead paragraph */
  --fs-lg:23px;       /* h3 */
  --fs-xl:28px;       /* h2 */
  --fs-2xl:36px;      /* h1 */

  /* Radius scale */
  --r:2px;
  --radius-sm:14px;
  --radius-md:22px;
  --radius-lg:32px;
  --page-max:1440px;

  /* Aliases consumed by chat-panel CSS + JS-rendered option cards.
     Keep these mapped onto the marketing palette so the JS doesn't
     have to know about brand-token migrations. */
  --sage:#c9623f; --sage-deep:#a24f32; --sage-dark:#3d1f2e;
  --sage-light:#f6e3d8; --sage-mist:#faf1ea;
  --sand:#f5ede4; --sand-light:#f5ede4; --sand-warm:#ede1d1;
  --text:#2a1620; --text-mid:#4a3542; --text-soft:#6f5c52; --text-muted:#8a7468;

  /* Elevation */
  --shadow-sm:0 2px 8px rgba(42,22,32,0.04);
  --shadow-md:0 8px 32px rgba(42,22,32,0.06);
  --shadow-lg:0 24px 64px rgba(42,22,32,0.08);
  --shadow-glow:0 8px 40px rgba(201,98,63,0.18);

  /* Public page container contract. Nav, footer, home sections, service
     pages, and Drips pages all consume these so the logo and content align. */
  --page-gutter:56px;
  --page-gutter-mobile:24px;
  --content-max:1328px;
}

/* Type-scale utility classes — the consistent way to size text site-wide.
   Prefer these over ad-hoc font-size values. */
.t-eyebrow{font-size:var(--fs-eyebrow)}
.t-fine{font-size:var(--fs-xs)}
.t-sm{font-size:var(--fs-sm)}
.t-body{font-size:var(--fs-base)}
.t-lead{font-size:var(--fs-md)}
.t-h3{font-size:var(--fs-lg)}
.t-h2{font-size:var(--fs-xl)}
.t-h1{font-size:var(--fs-2xl)}