/* ============================================================================
   tokens.css — Quick Counseling design tokens
   ----------------------------------------------------------------------------
   Lifted from the prototype's index.html `:root` block (the design system of
   record). Values are verbatim; the only additions are (a) tokens for colours
   the prototype hard-coded inline in JSX (marked "derived, was inline"), and
   (b) layout tokens taken from D_TOKENS in desktop-profile.jsx / M_PAD in
   mobile-profile.jsx.

   There is NO dark mode in the source. The prototype ships a single warm-sand
   light palette and no `prefers-color-scheme` rule anywhere, so none is
   invented here — only `color-scheme: light` is declared so form controls,
   scrollbars and the UA canvas stay light instead of being auto-darkened.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Fonts
   ---------------------------------------------------------------------------
   The prototype loaded Newsreader / Geist / Geist Mono from Google Fonts:
     https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300..600
       &family=Geist:wght@300..600&family=Geist+Mono:wght@400;500
   We self-host instead: `local()` first (free hit for anyone who has the font
   installed), then a same-origin `/fonts/...` URL served from R2.

   !! TODO(assets): the .woff2 files referenced below DO NOT EXIST YET. They
   !! still need to be fetched (Newsreader + Geist + Geist Mono variable
   !! subsets, latin + latin-ext), uploaded to the R2 bucket and routed at
   !! /fonts/* by the Worker. Until then the fallback stacks below carry the
   !! page — layout is stable because every stack ends in a system family.
   The prototype used the variable builds (Newsreader has opsz 6..72 + wght,
   Geist has wght), so one file per family covers weights 300/400/500/600.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: local("Newsreader"), url("/fonts/newsreader-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Geist"), url("/fonts/geist-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Geist Mono"), url("/fonts/geist-mono-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* ═══════════════════════════════════════════════════════════════════════
     ⚠ THE PRIMARY IS TERRACOTTA. THE TOKENS ARE STILL CALLED `--sage-*`.
     ---------------------------------------------------------------------
     Changed 16 Aug 2026. The palette was sage green (hue 165) on warm sand,
     and green-teal is the family BetterHelp trades in — on an affiliate
     directory that sends every outbound click to them, looking like them is a
     liability rather than a compliment. The accent moved to terracotta
     (hue 42), which was ALREADY IN THIS FILE as `--clay`, so this is a
     promotion of an existing brand colour rather than a new one invented for
     the occasion. `--clay` itself moved to a cool slate blue so the two
     accents still separate.

     THE NAMES WERE NOT CHANGED, and that is a deliberate trade rather than an
     oversight. `--sage-*` appears ~90 times across six stylesheets; a rename
     is a mechanical find-and-replace with no behaviour change, which is
     exactly the kind of diff that hides a real edit inside it. `--accent-*`
     aliases are defined below — new code should use those, and the old names
     can be retired in a commit that does nothing else.

     WHAT DID NOT MOVE, ON PURPOSE:
       · `--success` and its tints stay GREEN. Green means "available" by
         convention everywhere, it is the availability dot and the "accepting
         new clients" chip, and recolouring a status signal to solve a
         branding problem trades a real meaning for a cosmetic one.
       · Every neutral's LIGHTNESS is unchanged — only hue moved — so every
         contrast ratio this file was corrected for still holds.
     ═══════════════════════════════════════════════════════════════════════ */

  /* -- Palette: warm sand — calming, healthcare-appropriate, not clinical -- */
  --bg:          oklch(0.968 0.011 70);   /* warm clay-sand — page */
  --bg-2:        oklch(0.948 0.014 70);   /* deeper clay-sand — inset/well */
  --surface:     oklch(0.995 0.005 70);   /* near white — cards */
  --surface-2:   oklch(0.986 0.008 70);   /* chip fill */
  --ink:         oklch(0.23 0.020 40);    /* deep warm brown-ink — body */
  --ink-2:       oklch(0.41 0.018 40);    /* mid — secondary text */
  /* CHANGED from index.html's `oklch(0.58 0.012 170)` (approved 2026-08).
     0.58 measures 4.18:1 on --surface and 3.60:1 on --bg-2 — under the 4.5:1
     AA floor for small text, and this is the colour of every eyebrow, lede,
     caption, axis label and data-row label on the site. 0.52 measures 5.37:1,
     and is the value the rendered reference render already shipped, so this
     is a correction back to what was actually designed, not a new colour. */
  --ink-3:       oklch(0.52 0.015 40);    /* muted — captions, eyebrows */
  /* ⚠ SHAPES ONLY — dots, rules, borders, ::marker glyphs, the pager's ellipsis.
     NOT TEXT ANYBODY HAS TO READ. It measures 2.26:1 on `--surface`, which is
     half the 4.5:1 AA floor, and it is here at that value deliberately: a
     14x14 checkbox outline and a 4px bullet want to recede.

     It was being used as a text colour in four places — the "0 results" filter
     row, the dead pager step, a post's "updated" line and the table-of-contents
     numbers — and every one of them read as invisible rather than as quiet.
     They now take `--ink-3` (5.37:1). Reach for `--ink-3` for muted TEXT and
     leave this token to the shapes. */
  --ink-4:       oklch(0.74 0.012 40);    /* placeholder — dots and rules */
  --line:        oklch(0.90 0.012 60);    /* borders */
  --line-soft:   oklch(0.93 0.011 60);    /* inner rules */
  --sage:        oklch(0.47 0.105 42);    /* primary — TERRACOTTA, see note */
  --sage-deep:   oklch(0.35 0.095 42);    /* hover / dark variant */
  /* ⚠ L=0.94, NOT 0.93 — A SECOND-ORDER EFFECT OF THE HUE SHIFT.
     The eyebrow (`--ink-3`) sits on this tint, and at the old sage hue the pair
     measured just over 4.5:1. Moving both to the warm end moved their sRGB
     luminance too — same oklch lightness, different hue, different luminance —
     and the pair landed at 4.48:1: under AA by two hundredths, on 11px text.
     Lifting the TINT rather than darkening `--ink-3` keeps the correction local
     to one background instead of re-toning every caption on the site (and
     `--ink-3` carries its own documented correction already). 4.62:1 — headroom
     rather than a hairline pass. */
  --sage-tint:   oklch(0.94 0.034 45);    /* chip + callout bg */
  --sage-tint-2: oklch(0.88 0.052 45);
  --clay:        oklch(0.52 0.070 250);   /* cool accent — featured star */
  --clay-deep:   oklch(0.40 0.075 250);
  --clay-tint:   oklch(0.94 0.024 250);
  --success:     oklch(0.55 0.10 150);    /* live/accepting dot */
  --success-tint:oklch(0.94 0.04 150);
  --warn-tint:   oklch(0.95 0.035 75);

  /* -- Derived: colours the prototype hard-coded inline, named here so no
        raw oklch() literals leak into base.css / profile.css ------------- */
  --sage-line:      oklch(0.82 0.060 45);  /* was inline: featured chip border */
  --sage-line-soft: oklch(0.85 0.050 45);  /* was inline: forecast callout border */
  --success-ink:    oklch(0.32 0.10 150);  /* was inline: success chip text */
  --success-line:   oklch(0.85 0.06 150);  /* was inline: success chip border */
  /* UNUSED since the "changed mid-day" availability state was removed — one
     daily accepting-status pass cannot observe a same-day flip, so the cell
     could never legitimately render. Kept as a declared system colour (like
     --warn-tint) for whenever a second daily pass exists. See profile.js. */
  --amber:          oklch(0.85 0.06 75);   /* was inline: "changed mid-day" cell */
  --chip-soft-bg:   oklch(0.962 0.012 70); /* was inline: soft chip fill */
  --surface-glass:  oklch(0.99 0.005 70 / 0.92); /* was inline: sticky mobile CTA bar */
  --on-sage:        oklch(0.985 0.005 70); /* was inline: text on the primary button */
  --avatar-face:    oklch(0.99 0.008 70);  /* was inline: initials on the avatar */

  /* -- Accent aliases: the names the colours actually are ------------------
     Prefer these in new code. The `--sage-*` originals stay because six
     stylesheets reference them; see the note at the top of the palette. ---- */
  --accent:        var(--sage);
  --accent-deep:   var(--sage-deep);
  --accent-tint:   var(--sage-tint);
  --accent-tint-2: var(--sage-tint-2);
  --accent-line:   var(--sage-line);
  --on-accent:     var(--on-sage);

  /* -- Radii ---------------------------------------------------------- */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  16px;
  --radius-xl:  22px;   /* section + rail cards */
  --radius-2xl: 28px;   /* hero */

  /* -- Shadows -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px oklch(0.23 0.020 40 / .04), 0 1px 1px oklch(0.23 0.020 40 / .03);
  --shadow-md: 0 1px 2px oklch(0.23 0.020 40 / .04), 0 8px 24px -10px oklch(0.23 0.020 40 / .10);
  --shadow-lg: 0 2px 4px oklch(0.23 0.020 40 / .05), 0 24px 60px -24px oklch(0.23 0.020 40 / .18);
  /* was inline in HeroBand / PrimaryButton / StickyBookBar */
  --shadow-hero:   0 1px 2px oklch(0.23 0.020 40 / .04), 0 18px 50px -28px oklch(0.23 0.020 40 / .18);
  --shadow-btn:    0 1px 2px oklch(0.23 0.020 40 / .15), 0 8px 20px -8px oklch(0.35 0.095 42 / .35),
                   inset 0 1px 0 oklch(0.98 0.020 45 / .15);
  --shadow-sticky: 0 -8px 24px -10px oklch(0.23 0.020 40 / .12);

  /* -- Type ----------------------------------------------------------- */
  --font-sans:  "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Newsreader", ui-serif, Georgia, serif;
  --font-mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* -- Layout (D_TOKENS in desktop-profile.jsx, M_PAD in mobile) ------- */
  --pad: 80px;        /* page gutter */
  --rail: 360px;      /* right-hand verification rail */
  --gap: 40px;        /* main column ↔ rail */
  --page-max: 1440px; /* desktop artboard width */
  --measure: 620px;   /* lede / prose max width */
  --cell-h: 26px;     /* availability cell height */
  --cell-w: 26px;     /* availability cell width CAP — see base.css .cell */
  --cell-gap: 4px;
}

/* Gutter + rail step down before the layout collapses (matches the reference
   render's 1180px breakpoint), then again at the 390px mobile artboard. */
@media (max-width: 1180px) {
  :root { --pad: 40px; --rail: 320px; --gap: 32px; --cell-h: 22px; --cell-w: 22px; }
}
@media (max-width: 640px) {
  :root { --pad: 20px; --gap: 24px; --cell-h: 14px; --cell-w: 14px; --cell-gap: 3px; }
}