/* 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{
  /* Surfaces */
  --bg:#fbfaf7; --bg-2:#eee8dc; --surface:#ffffff;

  /* Type colors */
  --ink:#2a2a28; --ink-2:#3d3a35; --muted:#6b6b65;
  --line:#d8d2c3;

  /* Accents */
  --accent:#5b7c6b; --accent-2:#b08d57;

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

  /* 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:11px;  /* uppercase labels / eyebrows */
  --fs-xs:12px;       /* fine print */
  --fs-sm:13px;       /* secondary text */
  --fs-base:14px;     /* body default */
  --fs-md:16px;       /* lead paragraph */
  --fs-lg:20px;       /* h3 */
  --fs-xl:24px;       /* h2 */
  --fs-2xl:30px;      /* 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:#5b7c6b; --sage-deep:#3d5a4f; --sage-dark:#2d4a3e;
  --sage-light:#e6ece9; --sage-mist:#f0f4f1;
  --sand:#fbfaf7; --sand-light:#fbfaf7; --sand-warm:#eee8dc;
  --text:#2a2a28; --text-mid:#3d3a35; --text-soft:#6b6b65; --text-muted:#8a8a82;

  /* Elevation */
  --shadow-sm:0 2px 8px rgba(42,47,43,0.04);
  --shadow-md:0 8px 32px rgba(42,47,43,0.06);
  --shadow-lg:0 24px 64px rgba(42,47,43,0.08);
  --shadow-glow:0 8px 40px rgba(91,124,107,0.15);

  /* 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)}