/* ==========================================================================
   TCC — tokens.css
   Design tokens. Shared by every concept. Colour values are extracted from
   the live site — provenance in ../../docs/Brand Assets.md.

   RULE: no colour may be introduced outside this file. If a component needs
   a new colour, it is added here first, with a reason.
   ========================================================================== */

:root {

  /* --- Brand: sage / eucalyptus -----------------------------------------
     This IS the current brand colour. Added to the live theme 2019 and
     applied to the events section. Resolved from #7C9C91 / #7D9D90, which
     were one colour drifting by a digit. */

  /* --- 2026 palette -------------------------------------------------------
     Client-supplied reference image, September 2026, sampled off the five
     swatches in ../../brand-assets/colour-palette-2026.jpg. Design 4
     is built on these; black and white are the base, and the blue and tan are
     accents used sparingly. Sage is not used in Design 4 at all.

     Contrast, measured against white: tan 4.99:1, blue 8.86:1, charcoal
     10.4:1 — all clear AA for body text. Ink on mist is 18.9:1. */
  --tcc-ink:      #000508;   /* near-black — dark grounds, display type      */
  --tcc-charcoal: #404040;   /* secondary dark — quiet labels, fills          */
  --tcc-grey:     #CCCCCC;   /* light grey — rules, dividers                  */
  --tcc-blue:     #214D72;   /* accent — focus rings, link hover              */
  --tcc-tan:      #99633F;   /* accent — rules and fills only, see below      */
  /* The swatch tan measures 4.99:1 on white but 4.19:1 on --tcc-mist, which is
     the ground it sits on most often. So type uses this darkened sibling
     (4.99:1 on mist, 5.94:1 on white) and --tcc-tan stays the exact swatch for
     anything that is not read. Same split as --sage / --sage-deep. */
  --tcc-tan-deep: #8A5837;   /* accent — eyebrows, links, the warm note       */
  /* --ink-muted is 4.47:1 on --tcc-mist. One step darker clears it at 4.82:1
     and still reads as secondary. */
  --tcc-muted:    #666666;   /* secondary body copy on Design 4's grounds     */
  --tcc-mist:     #ECEBE9;   /* light ground, replaces the sage wash          */

  /* --- Neutrals --------------------------------------------------------- */
  --ink:         #231F20;   /* rich black — ALL body text. Never use #000  */
  --ink-muted:   #6B6B6B;
  --rule-input:  #8A8A8A;   /* form field boundaries - needs 3:1 (WCAG 1.4.11) */
  --off-white:   #F2F1F1;
  --white:       #FFFFFF;

  /* --- Type families ----------------------------------------------------- */
  --font-display: 'Elenar', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Type scale --------------------------------------------------------
     Fluid, but deliberately moderate. Concept stylesheets may re-declare
     these; nothing else may. */
  --t-h1:      clamp(2.2rem,  1.6rem + 2.4vw, 3.25rem);
  --t-h2:      clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --t-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-body:    1.0625rem;   /* 17px */
  --t-small:   0.875rem;    /* 14px */
  --t-label:   0.75rem;     /* 12px — uppercase eyebrows */

  --lh-tight:  1.12;
  --lh-head:   1.2;
  --lh-body:   1.65;

  --ls-label:  0.14em;      /* eyebrow letter-spacing */
  --ls-head:   -0.01em;

  /* --- Spacing — 8px base ------------------------------------------------ */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 48px;  --s-6: 64px;  --s-7: 96px;  --s-8: 128px;

  /* Scrollbar width, published by nav.js. 0 is the correct fallback: with
     JS off the full-bleed calculation behaves exactly as it did before. */

  /* --- Layout ------------------------------------------------------------ */
  --maxw:       1320px;
  --maxw-text:  62ch;       /* measure for long-form copy */
  --gutter:     var(--s-3);
  --header-h:   84px;

  /* --- Section rhythm — the colour-blocking device (BUILD 5.3) ----------- */

  /* --- Grid --------------------------------------------------------------- */

  /* --- Surface treatment — concepts override these ---------------------- */

  /* --- Motion ------------------------------------------------------------- */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   160ms;
  --dur:        280ms;
  --dur-slow:   520ms;

  /* --- Focus ------------------------------------------------------------- */
  --focus:      var(--tcc-blue);
  --focus-w:    3px;
}
