/* src/tokens.css — the house tokens, owned by the repo.
 *
 * WHY THIS IS A FILE AND NOT ANOTHER `:root` BLOCK. This block had been
 * pasted verbatim into the homepage, the Showroom, Trade and now the Library.
 * Four copies of a colour system is how two surfaces come to disagree about
 * what `--green` is, and the repo has already paid for the same shape twice:
 * three hand-kept homepage files where a change to one was invisible until it
 * failed to appear, and three hand-rolled palette strips where a preview and
 * the thing it previewed drifted apart.
 *
 * THE RULES THE SYSTEM ACTUALLY ENFORCES, so nobody has to rediscover them:
 *   · Cormorant Garamond for display, Jost for everything else.
 *   · SQUARE CORNERS. There is no border-radius anywhere in the system and
 *     adding one is a change to the brand, not to a component.
 *   · Controls are uppercase, letter-spaced, 1px rule, no fill except the
 *     primary.
 *   · Not one hairline rule on a marketing page — a divider is a five-colour
 *     strip carrying real hexes from a real palette. `.strip` is that device.
 */

:root{
  color-scheme:light;
  --ink:#0d1f12; --ink-2:#38402f; --quiet:#7d7768;
  --paper:#f7f3ec; --paper-2:#efe8db; --card:#fffdf9;
  --green:#105305; --gold:#f6d38a; --gold-dk:#a8823c; --rule:#ddd4c2;
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --pad:clamp(18px,5vw,64px); --max:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --line:var(--rule); --muted:var(--quiet); --faint:#a89f8c;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* the divider device — five real hexes, never a hairline */
.strip{display:flex;height:6px;width:100%}
.strip i{flex:1}

/* type scale */
.h{font-family:var(--display);font-weight:500;letter-spacing:-.015em;text-wrap:balance;line-height:1.06}
.h1{font-size:clamp(34px,5.6vw,62px)}
.h2{font-size:clamp(28px,4.6vw,46px)}
.h3{font-size:clamp(19px,2.4vw,25px);font-weight:600;line-height:1.1}
/* ⚠️ `.sub` IS THE DESCRIPTIVE TEXT ON EVERY PANEL and it was --quiet,
   which measures 4.03:1 on paper — under the 4.5 body threshold. It is the
   single highest-impact line in this file: the lede under every heading, the
   note under every control. --ink-2 was sitting unused at 9.77. */
.sub{font-size:clamp(14px,1.5vw,16.5px);line-height:1.62;color:var(--ink-2);max-width:58ch;font-weight:300}
/* 11px, and the tracking comes in with it: wide letterspacing below about
   13px reads as texture rather than words. --green passes at 8.40. */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.20em;text-transform:uppercase;color:var(--green);
  display:block;margin-bottom:10px}

/* controls — square, uppercase, per the system */
.go,.ghost{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 30px;
  border:1px solid var(--ink);font:600 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.go{background:var(--ink);color:var(--paper)}
.go:hover{background:var(--green);border-color:var(--green);color:#fff}
.go:disabled{opacity:.4;cursor:not-allowed}
.ghost{background:transparent;color:var(--ink)}
.ghost:hover{border-color:var(--green);color:var(--green)}
.back{font:600 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green);
  padding-block:16px;display:inline-block}