/* ==========================================================================
   EcoVerify Ltd — design tokens. Midlands Code Lab.

   🚨 TOKENS ONLY. Custom-property declarations, nothing else. No layout, no
   component rules, no selectors other than :root. If you find yourself
   writing a class in here, it belongs in site.css or the home page's <style>.

   Why this file exists (14/09/2026): every shared value used to be written
   twice — once in option-b-dark.html's inline <style> and once in site.css —
   and the two drifted (logo radius 3px v 5px, nav gap 30px v 22px, footer
   #102018 v #0B1711, body font stack missing "Helvetica Neue", header CTA in
   Oswald 14/600 v Epilogue 16/500 …) until the client noticed the home page
   and the inner pages reading as two sites. Both stylesheets now consume the
   values below, so a colour or a size changes in ONE place.

   Loaded by all nine pages, BEFORE site.css / the home page's inline <style>:
     pages/*.html      <link rel="stylesheet" href="css/tokens.css?v=…">
     option-b-dark.html <link rel="stylesheet" href="pages/css/tokens.css?v=…">
   The ?v= is the first 8 chars of the file's md5 — bump it in all nine pages
   whenever this file changes, same as css/site.css.

   Palette sampled from the client's own logo file (EcoVerify Square Logo.jpg):
     #13271c  dark green ground of the logo tile   (Steve: "not black")
     #0cd8a3  the medal mark
     #ffffff  the wordmark
   Action colour on their live Squarespace site: hsl(163.09,49.55%,43.53%) = #38A687
   ========================================================================== */

:root{
  /* ---- ground (the inner pages' paper) ---- */
  --paper:      #eff2ee;   /* off-white, faint green cast. Not cream, not white. */
  --paper-2:    #e4e9e3;   /* panel tint */
  --paper-3:    #d7ded6;   /* rules */

  /* ---- brand darks ---- */
  --ink:        #102018;   /* the logo's own dark green; home-page ground; header CTA fill */
  --ink-2:      #182C22;   /* header nav text on the green header; home "proof" band */
  --ink-deep:   #0B1711;   /* one step down: the footer, both templates */
  --action:     #38A687;   /* header background — Steve's own live button colour */
  --on-ink:     #eff2ee;   /* text on --ink / --ink-deep (footer text and links) */
  --on-ink-mut: #a9bcb1;   /* muted text on --ink, 7.9:1 */

  /* ---- text on paper ---- */
  --text:       #13271c;   /* 13.9:1 on --paper */
  --muted:      #41504a;   /* 7.5:1 */
  --faint:      #5c6b64;   /* 5.0:1  — smallest functional text only */

  /* ---- accent (one hue, two values) ---- */
  --medal:      #08D8A0;   /* large fills, marks, text on --ink, header CTA border */
  --medal-ink:  #1F7A61;   /* links + small text on paper */

  /* ---- flag colours ---- */
  --amber:      #F5B33C;   /* the concept ribbon only */

  /* ---- motion ---- */
  --ease: cubic-bezier(.2,.6,.2,1);

  /* ---- type: the two stacks. Both faces are self-hosted (css/fonts.css on
     the inner pages, base64 @font-face on the home page), so the fallbacks
     only show while the woff2 is in flight — but they are still part of the
     computed value, and "Helvetica Neue" going missing from one copy was one
     of the drifts. Use the tokens, never restate the stack. ---- */
  --font-body: "Epilogue","Helvetica Neue",Arial,sans-serif;
  --font-disp: "Oswald","Trebuchet MS",Helvetica,Arial,sans-serif;

  /* ---- type scale. One 1.25 major third, 12.8px to 61px. Every step is
     exactly 1.25, so the hierarchy comes from size and tracking rather than
     from weight. The home page's hero h1/h2 are deliberately larger and set
     their own clamps; everything else takes these. ---- */
  --t-xs:    12.8px;
  --t-sm:    16px;
  --t-body:  20px;
  --t-lead:  clamp(22px, 2.3vw, 25px);
  --t-h3:    clamp(24px, 2.7vw, 31px);
  --t-h2:    clamp(30px, 4vw, 39px);
  --t-h1:    clamp(36px, 6vw, 61px);
  --t-disp:  clamp(27px, 4.4vw, 49px);
  --lh-body: 1.55;
  --ls-body: -.003em;

  /* ---- the page container ----
     1300px max, 20px gutter, on BOTH templates. The home page used to run a
     1240px / 24px .wrap while the inner pages ran 1300px / 20px, so the logo
     sat at x=100 on the home page and x=90 everywhere else at 1440 (24 v 20
     at ≤1280): click Home → About and the logo jumped. Steve saw it. */
  --shell-max: 1300px;
  --shell-pad: 20px;

  /* ---- header ---- */
  /* 77px on BOTH templates. The header used to be 64px on the inner pages and
     77px on the home page, so the whole bar jumped height on click-through -
     obvious once Steve had the wordmark removed and the logo was all that was
     left in it. Chris spotted it 14/09/2026. Not reduced at phone widths. */
  --head-h:   77px;
  --nav-gap:  22px;
  /* flex gap between the three header blocks. Was 20px on the home page and 16px
     on the inner pages, which pushed the header CTA 4px left at tablet widths. */
  --hdr-gap: 16px;
  /* below this the nav collapses to the disclosure; below --cta-hide-max the
     header "Contact us" goes too (it is repeated inside the panel). Both
     templates. The home page used to keep the CTA down to 520px. These are
     documentation for the two @media blocks — CSS cannot read a custom
     property inside a media query, so the numbers are restated there. */
  --nav-collapse-max: 1179px;
  --cta-hide-max:     899px;

  /* ---- the logo tile (header and footer) ----
     🚨 Since 14/09/2026 this mark is the ONLY brand element in the header, so
     its size is not cosmetic: 58px desktop / 44px ≤640px, height auto (the
     artwork is 253×256 / 256×259, so it renders 58×59, not 58×58). Radius 5px,
     NO border — the home page had 3px with a 1px border and read as a
     different tile. */
  --logo-w:      58px;
  --logo-w-sm:   44px;
  --logo-r:      5px;
  --foot-logo-w: 52px;
  --foot-logo-h: 53px;

  /* ---- the CTA: shape and lettering (header "Contact us" and every .btn).
     Type is Epilogue (the body face) at --t-sm, or --t-body for the big
     variant, weight 500. The home page's buttons used to be Oswald 16/600. The
     FILL is not a token: mint on the paper pages, --action green on the home
     page's dark ground — deliberate. ---- */
  --cta-radius:  4px;
  --cta-pad:     11px 18px;
  --cta-pad-big: 15px 26px;
  /* Transparent, not none — keeps the box the same size so nothing shifts. The
     header CTA used to carry a visible mint hairline on the inner pages; Chris
     called it 14/09/2026 and the home page's borderless button is canonical. */
  --cta-border:  1px solid transparent;

  /* Header-nav interaction. The home page's "wipe": a hairline retracts to the
     right while a heavier dark rule draws in from the left, handing over mid-way.
     The inner pages used to thicken a rule in place and flash it bright mint,
     which read as a different site. These three drive BOTH templates — change
     them here, not in either stylesheet.
     ⚠️ Header only. The footer reuses .navrule on a dark ground, where a dark
     rule would vanish; .foot .navrule keeps its own pale treatment. */
  --nav-rule-rest:   rgba(16,32,24,.35);
  --nav-rule-draw:   var(--ink);
  --nav-hover-color: var(--ink);
  --cta-weight:  500;
  --cta-ls:      -.006em;
}