/* The Healing Collective — design tokens.
 *
 * Values EXTRACTED from the live brand site (healingcollectiveutah.org) on
 * 2026-07-31 by reading computed styles, not eyeballed from a screenshot.
 * These replace the interim sage placeholder (#7a9b8a / #f4f1ec) that was my
 * invention and never a brand decision.
 *
 * DECISIONS D22: HC's style is its own and fits its genre. Nothing here is
 * inherited from any other client's palette. Semantic tokens only — no
 * component may hardcode a hex. If a colour is missing, add a token.
 *
 * Contrast is verified against WCAG AA (4.5:1 body, 3:1 large text) in the
 * comments below; re-verify whenever a value changes.
 */

:root {
  /* ---- brand constants: THE OFFICIAL SHEET (Mariah, 2026-08-03) ----
   * These six are canonical. Earlier values were read off the live Wix site;
   * that reading MISSED --hc-mist entirely, which is why the sheet wins.
   */
  --hc-ink:          #2d2d23;  /* near-black olive — body text, CTAs      */
  --hc-olive:        #868664;  /* mid olive — the signature brand colour  */
  --hc-olive-bright: #94935c;  /* gold-olive — highlights, accents        */
  --hc-mist:         #b1bec6;  /* soft blue-grey — the cool counterweight */
  --hc-bone:         #e0ded2;  /* warm sand — fields, text on dark olive  */
  --hc-cream:        #f2f2f0;  /* warm near-white — page background       */
  --hc-white:        #ffffff;

  /* DERIVED, not on the sheet: a darkened --hc-olive. Bone on raw #868664 is
   * only 2.8:1, which fails AA for body text, and their own site renders the
   * hero panel darker for exactly that reason. Used ONLY for large dark
   * surfaces that carry text. If the designer's brand sheet lands with an
   * official dark olive, replace this value and nothing else changes. */
  --hc-olive-deep:   #5a5a44;

  /* ---- semantic tokens (what components actually consume) ---- */
  --color-bg:            var(--hc-cream);
  --color-surface:       var(--hc-white);
  --color-surface-alt:   var(--hc-bone);
  --color-surface-dark:  var(--hc-olive-deep);

  --color-text:          var(--hc-ink);       /* on --color-bg: 12.40:1 AA ✓ */
  --color-text-muted:    #5A5A50;             /* on --color-bg:  7.2:1 AA ✓ */
  --color-text-on-dark:  var(--hc-bone);      /* on olive-deep:  5.22:1 AA ✓ */

  --color-primary:       var(--hc-olive-deep);
  --color-primary-text:  var(--hc-bone);
  /* CTAs on the live site are INK, not olive (measured rgb(45,45,35) on
   * LEARN MORE / Sign Up, 2026-08-18) — uppercase, letterspaced, square. */
  --color-cta:           var(--hc-ink);
  --color-cta-text:      var(--hc-cream);
  --color-accent:        var(--hc-olive);
  --color-mist:          var(--hc-mist);      /* quiet dividers, cool fills */
  --color-border:        #D5D3C6;
  --color-focus:         var(--hc-olive-bright);

  /* status — desaturated to sit inside the earthy palette rather than
   * shouting in default browser red/green */
  --color-danger:        #8C4A3F;
  --color-warning:       #A8853C;
  --color-success:       #5F7355;

  /* ---- type ----
   * The brand display face is "The Seasons" (serif). It is a COMMERCIAL
   * typeface served on Wix under a site licence — we cannot re-host it
   * without our own licence, so the stack degrades to a close free serif.
   * See deliverables/brand-assets.md before shipping publicly.
   */
  /* Brand faces, self-hosted in static/fonts.css. That file must be linked
   * BEFORE this one (or alongside it) or these names resolve to the
   * fallbacks — which is a silent, easily-missed regression, so
   * tests/test_fonts.py asserts every page links it. */
  --font-display: "The Seasons", "Cormorant Garamond", "EB Garamond",
                  Georgia, "Times New Roman", serif;
  --font-body:    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;

  --text-hero:  3.25rem;  /* site uses 50–56px for hero headings */
  --text-h1:    2rem;
  --text-h2:    1.375rem;
  --text-body:  1rem;     /* 16px, matching the site */
  --text-small: 0.875rem;

  --leading-tight: 1.15;
  --leading-body:  1.6;   /* generous — the brand reads calm, not dense */

  /* ---- spacing / shape ---- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-6: 1.5rem;  --space-8: 2rem;
  --space-12: 3rem;   --space-16: 4rem;

  /* The brand site is SQUARE — zero radius on every surface and control
   * (verified on the live Wix site 2026-08-18: buttons, fields, panels all
   * 0px). Rounded corners were our invention and read softer/apps-ier than
   * the brand. Tokens stay so a future brand change is a one-line edit. */
  --radius-sm: 0;
  --radius:    0;
  --radius-lg: 0;
  --radius-pill: 999px;  /* kept for the rare true-pill (unused on brand surfaces) */

  --shadow-sm: 0 1px 3px rgba(45, 45, 35, .08);
  --shadow:    0 4px 16px rgba(45, 45, 35, .10);
}

/* Dark mode is NOT yet a brand decision (the site is light-only). Tokens are
 * structured so it is a one-block change when Steve/Mariah decide — do not
 * invent a dark palette before then. */