/* ============================================================================
   tokens.css — THE SINGLE SOURCE OF TRUTH for design tokens + base elements.
   Product.Zone design system v6.2. Extracted verbatim from the canon pages.
   Edit a value here and it changes on every page. Never fork these.
   ============================================================================ */

:root{
  /* — light / "Working Paper" register — */
  --white:#FFFFFF; --light:#F0EFEA; --light2:#E8E7E1; --lborder:#D7D5CD;
  --ltext:#131210; --lmuted:#46443f; --lmuted2:#807d75;

  /* — warm-dark turn register — */
  --warm-dark:#1f1813; --warm-text:#EFE9DF; --warm-muted:rgba(239,233,223,.62); --warm-border:rgba(239,233,223,.1);

  /* — dark / "Instrument" register — */
  --black:#0a0a0a; --surface:#141414; --surface2:#1c1c1c; --dtext:#EDECE6;
  --dmuted:rgba(255,255,255,.62); --dmuted2:rgba(255,255,255,.32); --dborder:rgba(237,236,230,.1);

  /* — accents — */
  --teal:#2BB5C7; --orange:#D4910A; --red:#A3292B; --green:#1E8C4E; --amber:#C8861A;

  /* — type families — */
  --display:'General Sans',sans-serif; --body:'Switzer',sans-serif; --mono:'JetBrains Mono',monospace;

  /* — rhythm — */
  --pad-y:clamp(80px,10vh,140px); --pad-x:clamp(22px,6vw,80px); --w:1180px;
}

/* — resets + base — */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--light);color:var(--ltext);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
svg,img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.05}

/* — shared primitives — */
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:500}
.band{padding:var(--pad-y) var(--pad-x);position:relative}
.inner{max-width:var(--w);margin:0 auto;width:100%}

/* — buttons — */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;font-size:16px;padding:15px 26px;border-radius:9px;transition:transform .15s,background .15s,filter .15s;cursor:pointer;border:none;line-height:1}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--teal);color:#062d33}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{background:transparent;border:1px solid currentColor;opacity:.65}
.btn-ghost:hover{opacity:1}
.btn .arr{font-family:var(--mono);font-size:14px}

/* — reveal-on-scroll — */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* — shared lead block (eyebrow + headline + sub) — */
.lead{max-width:64ch;margin-bottom:clamp(44px,5.5vh,68px)}
.lead .eyebrow{margin-bottom:20px;display:inline-block}
.lead h2{font-size:clamp(32px,4.2vw,56px);line-height:1.03;margin-bottom:20px;max-width:18ch;letter-spacing:-.025em}
.lead h2 .hl{color:var(--teal)}
.lead p{font-size:clamp(17px,1.5vw,20px);color:var(--lmuted);line-height:1.6;max-width:54ch}
.r-paper .lead .eyebrow,.r-white .lead .eyebrow{color:var(--lmuted2)}

/* — register utilities: light "Working Paper" vs dark "Instrument" bands — */
.r-paper{background:var(--light)} .r-white{background:var(--white)}
.r-dark{background:var(--surface);color:var(--dtext)} .r-black{background:var(--black);color:var(--dtext)}
.r-dark .lead .eyebrow,.r-black .lead .eyebrow{color:var(--teal)}
.r-dark .lead h2,.r-black .lead h2{color:var(--dtext)}
.r-dark .lead p,.r-black .lead p{color:var(--dmuted)}