/* kit/tokens.css — the homepage's settled values, as variables. Nothing here is invented.
   Every value is either (a) copied from a named source line in super-site/ or (b) a computed style measured
   on https://gnar-super.vercel.app/hero-c (the local build in super-site/public is byte-identical; checked
   2026-09-30 with md5) by kit/tools/measure.mjs → kit/tools/measured.json. "m1440"/"m390" = measured at that
   viewport width. Source key: T = super-site/public/css/tokens.css, S = super-site/src/css/super.css,
   HS = src/css/hero-shared.css, HC = src/css/hero-c.css, BASE = public/css/base.css.
   Pages use these through var(--…); they never redefine them (no :root in page.css). */

/* ---- fonts (T:3-7; the Instrument Serif subset is the homepage's only serif, the "Contact Us" accent) */
@font-face{font-family:"Geist";src:url(/kit/fonts/geist-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url(/kit/fonts/geist-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geist";src:url(/kit/fonts/geist-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/kit/fonts/geist-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Pixel Line";src:url(/kit/fonts/geist-pixel-line.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Instrument Serif";src:url(/kit/fonts/instrument-serif-italic-sub.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  /* ---- colour: ground and ink (T:10-13; body bg m1440 rgb(15,13,13)) */
  --bg:#0f0d0d;                 /* page ground, every section on hero-c (m1440) */
  --surface-1:#151313;          /* S:273-276 every card ground (Solutions, spotlight, industries); m1440 rgb(21,19,19) */
  --surface-raised:#1b1b1b; --surface-elevated:#232223; --footer-surface:#000;   /* T:10-12 */
  --fg:#fff;                    /* headings (S:76 color:#fff) */
  --fg-body:rgba(255,255,255,.72);   /* ledes and body copy (S:172) */
  --fg-card:rgba(255,255,255,.74);   /* Solutions card copy (S:85) */
  --fg-muted:#a8a8a8;           /* T:10 --muted-fg */
  --line:rgba(255,255,255,.1);  /* S:273-276 hairlines and card borders */
  --fg-caption:rgba(255,255,255,.45); /* footnotes (.sp-foot m1440) */
  --fg-small:rgba(255,255,255,.7);    /* small card copy (.ib-copy m1440) */
  --border:rgba(255,255,255,.08); --input:rgba(255,255,255,.05);   /* T:11 */

  /* ---- colour: the one accent (T:14-15). Orange is a mark, a word, a control or a sliver of light; never a
     field. See BRAND-DIALECT.md for where it may appear. */
  --accent:#fa5539;             /* Gnar orange; primary button bg m1440 rgb(250,85,57) */
  --accent-hover:#ff6e55;       /* HS:18 primary hover; m1440 rgb(255,110,85) */
  --accent-ink:#181b22;         /* text on orange; m1440 rgb(24,27,34) */
  --pulse-accent:rgba(250,85,57,.5); --ring:#fa5539; --selection-bg:rgba(250,85,57,.28);   /* T:15-16 */
  /* diegetic chart colours, only inside product/dashboard mockups (T:18-19) */
  --teal:#0d9b8a; --teal-bright:#00c8a0; --amber:#d4920a; --amber-bright:#e8a317; --red:#dd4425; --violet:#6640ff;

  /* ---- type families (T:21-23) */
  --font-sans:"Geist",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,monospace;
  --font-pixel:"Geist Pixel Line",ui-monospace,monospace;
  --font-serif:"Instrument Serif",Georgia,serif;   /* one-word italic accent only (contact "Contact Us") */

  /* ---- type scale. size / line-height / tracking / weight per role */
  --display:clamp(46px,7.05vw,120px);   /* HC:30 hero h1; m1440 101.52px, m390 45.24px */
  --display-lh:.98; --display-ls:-.03em; --display-w:600;
  --h2:clamp(2.25rem,1.2rem + 2.4vw,3.25rem);   /* S:65; m1440 52px, m390 36px */
  --h2-lh:1.06; --h2-ls:-.035em; --h2-w:600;     /* S:75 */
  --h3:clamp(1.5rem,2.1vw,2rem);        /* S:84 card title; m1440 30px, m390 24px */
  --h3-lh:1.1; --h3-ls:-.02em; --h3-w:600;
  --h4:1.25rem; --h4-lh:1.2; --h4-w:600; /* S:299 small card label (.ib-label); m1440 20px */
  --body:1.0625rem; --body-lh:1.55;     /* S:172 ledes; m1440 17px/26.35px */
  --body-card-lh:1.5;                   /* S:85 card copy 17px/25.5px */
  --small:.9375rem; --small-lh:1.5;     /* industries copy m1440 15px/22.5px */
  --caption:12px;                       /* footnotes (.sp-foot m1440 12px/20px) */
  --eyebrow:11px; --eyebrow-lh:16.5px; --eyebrow-ls:.1px;   /* BASE:32, mono uppercase */
  --stat:120px; --stat-390:64px;        /* pixel numerals (.lg-num m1440 120px, m390 64px) */

  /* ---- layout (S:65-66, S:205-206) */
  --sec-pad:128px;   /* section top/bottom padding, desktop */
  --edge:44px;       /* left/right page gutter, desktop */
  --gap:160px;       /* gap between stacked sections that sit on one ground */
  --container-page:1240px; --container-section:1600px;   /* T:27 */
  --header-h:64px;   /* S:4 fixed nav bar height */
  --nav-clear:76px;  /* HS:6 --hv-nav: room the fixed nav takes at the top of the first section */
  --page-top:calc(var(--nav-clear) + 44px);   /* HC:16: the homepage hero's top padding (120px). A page's first section starts at least this far down */

  /* ---- shape */
  --radius:14px;          /* S:273-276 cards (m1440 .approach-c, .ib-cell 14px) */
  --radius-pill:999px;    /* buttons (HS:14 literal 999px) */
  --radius-full:9999px;   /* T:30; pills, round icon buttons, chips */
  --radius-chip:6px; --radius-menu:10px;   /* T:30 */

  /* ---- buttons (HS:14-21; m1440 and m390 identical) */
  --btn-h:44px; --btn-pad:0 22px; --btn-font:500 15px/1 var(--font-sans);
  --btn-sm-h:40px; --btn-sm-pad:0 16px; --btn-sm-font:400 14px/1 var(--font-sans);   /* .sp-cta m1440 40px */

  /* ---- motion (T:33-34; HS:16; b-nav.js panel timings) */
  --ease:cubic-bezier(.16,1,.3,1); --ease-std:cubic-bezier(.4,0,.2,1); --ease-out:ease-out;
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --dur-fast:.12s;   /* button press (transform) */
  --dur:.2s;         /* hover colour/border changes */
  --dur-panel:.24s;  /* menu panel open (b-nav.js); close .18s */
}
@media (max-width:809px){:root{
  --sec-pad:80px; --edge:20px;   /* S:66 */
  --gap:96px;                    /* S:206 */
  --display:clamp(40px,11.6vw,58px); --display-lh:1.02;   /* HC:56 phones (core.js compact layout below 810px): 45.24px at 390 */
  --nav-clear:56px; --page-top:calc(var(--nav-clear) + 40px);   /* HS:7, HC:55: phones, 96px */
}}