/* ───────────────────────────────────────────────────────────────────────────
   Go Well — Design tokens.
   Palette sampled directly from Lydia's real GWS logo (src/images/logo/
   gowell-logo-transparent.png) — task #11343. The logo's two inks are a
   CYAN-TEAL (#009890, hue ~177°) and a MAROON (#973a3b, hue ~359°).
   The previous palette ran the teal too GREEN (#006b57, hue ~169°); the whole
   teal ramp is now rebuilt on the logo's cooler cyan-teal hue. Lightness levels
   kept so WCAG 2.2 AA holds — the light fill (--primary-container) stays a
   brighter tint of the logo hue (the literal #009890 is too dark to carry AA
   dark text). Supersedes the #10721 teal/sage system.
   Muted-text token (--on-surface-variant) clears WCAG 2.2 AA 4.5:1 on surface.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Brand / primary (cyan-teal, sampled from the logo) ── */
  --primary:            #007872;   /* AA text/links on surface (5.1:1) */
  --primary-container:  #08bcb3;   /* logo-hue light fill (pair w/ on-pc 4.8:1) */
  --primary-dim:        #51d6cd;   /* inverse-primary — for dark surfaces (7.4:1) */
  --on-primary:         #ffffff;
  --on-primary-container:#00423f;  /* darkest teal — AA text on light (10.9:1) */

  /* ── Secondary (muted cyan-teal — supporting tone) ── */
  --secondary:          #376764;
  --secondary-container:#bee4e2;
  --secondary-fixed:    #c0e7e5;
  --on-secondary-container:#1d4e4b;

  /* ── Surfaces (cool cyan-teal tint to match the brand hue) ── */
  --surface:            #f7fbfa;   /* page background */
  --surface-low:        #eff5f5;
  --surface-container:  #e9efef;
  --surface-high:       #e4eaea;
  --surface-highest:    #dee5e5;
  --inverse-surface:    #2c3131;   /* dark sections (CTA) */
  --inverse-on-surface: #edf2f0;

  /* ── Text ── */
  --on-background:      #181d1c;
  --on-surface:         #181d1c;
  --on-surface-variant: #3d4d4c;   /* muted body — AA on surface (8.5:1) */
  --text-heading:       #1a1c1c;

  /* ── Lines / states ── */
  --outline:            #677e7d;
  --outline-variant:    #b6cecd;
  --success-soft:       #d5f1f0;   /* icon chip backgrounds */
  --error:              #ba1a1a;

  /* ── Logo accent (maroon from the GWS lotus) — use sparingly ── */
  --accent:             #70292a;

  /* ── Backwards-compatible aliases (legacy class names in location.css) ── */
  --brand:      var(--primary);
  --brand-dark: var(--on-primary-container);
  --ink:        var(--on-background);
  --muted:      var(--on-surface-variant);
  --bg:         var(--surface);
  --bg-alt:     var(--surface-low);
  --line:       var(--outline-variant);

  /* ── Type ── Fraunces (display/headings — #11345, swapped from Bodoni Moda whose Didone
     hairlines read too thin) + Hanken Grotesk (body/labels). Loaded in base.njk.
     Material Symbols Outlined for iconography. */
  --font-sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head:  "Fraunces", Georgia, "Times New Roman", serif;
  --font-script: var(--font-head);   /* legacy alias — no script face in this system */

  /* ── Fluid type scale (matches Stitch: body 16/18, headline 24/32, display 48) ── */
  --step--1: clamp(.81rem, .78rem + .14vw, .88rem);   /* label 13–14 */
  --step-0:  clamp(1.0625rem, 1.03rem + .15vw, 1.1875rem);   /* body 17–19 (bumped +1px, #11342) */
  --step-1:  clamp(1.3rem, 1.18rem + .55vw, 1.5rem);  /* headline-md 21–24 */
  --step-2:  clamp(1.75rem, 1.5rem + 1.1vw, 2rem);    /* headline-lg 28–32 */
  --step-3:  clamp(2.4rem, 1.95rem + 2vw, 3rem);      /* display 38–48 */

  /* ── Spacing (Stitch: gutter 24, mobile margin 20) ── */
  --space-s:  .75rem;
  --space-m:  1.5rem;     /* gutter */
  --space-l:  3rem;
  --space-xl: 5rem;
  /* Section rhythm tightened (#11339) — was 80→120px, which stacked into
     160–240px voids between same-tone sections. Now 60→88px. */
  --space-section: clamp(3.75rem, 3rem + 3vw, 5.5rem);  /* 60 → 88px */

  /* ── Section banding (#11339) — alternating tones so adjacent sections read
     as distinct panels instead of one flat white run. --band-alt is a soft
     sage tint with REAL separation from --surface (#f6faf9); --band-seam is a
     faint hairline for the boundary between two same-tone neighbours. The grain
     is a tileable fractal-noise texture layered at low opacity for organic warmth. */
  --band-alt:   #e6efee;
  --band-seam:  rgba(0, 66, 63, .10);
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ── Geometry ── radii: default .25 / lg .5 / xl .75 / 2xl 1rem / pill ── */
  --radius:      .75rem;   /* cards */
  --radius-lg:   1rem;     /* feature cards */
  --radius-xl:   1.5rem;   /* big bento / CTA */
  --radius-pill: 9999px;   /* buttons + chips */

  --wrap:        1140px;   /* container-max */
  --wrap-narrow: 760px;

  --shadow-card: 0 8px 28px rgba(0, 30, 30, .08);
  --shadow-lg:   0 16px 48px rgba(0, 30, 30, .12);
}