/* Site type scale: the one source for headings, body and labels.
   Based on the "2026 UI Kit" Figma file (Typography), adjusted on 2026-10-10
   to three viewports and a lighter body (Rurik): the kit's two-step H2 and its
   18–20px body read as dated next to modern AI product sites. The kit file and
   the brand guidelines (/about/brand, Type styles) still need updating to match.

   Viewports    Desktop >= 1024px · Tablet 600–1023px · Mobile < 600px
   Headings     Synapse. H1 64/48/34 · H1 Compact 48/40/32 · H2 56/40/28 ·
                H3 28/24/22 Regular. H4 20/18/18 · H5 16/16/15 · H6 14/14/13
                Semibold. Tighter than the kit's 1.26 / 0 (Rurik, 2026-10-10),
                after the brand guide's 110% and -2–3%, graded by level:
                H1 1.10 / -.025em · H2 1.12 / -.02em · H3 1.2 / -.01em ·
                H4 1.3 / -.01em · H5–H6 1.35 / 0.
   Body         Synapse Regular, line height 1.5.
                Lede 18/17/16 · Body 16/16/15 · Small 15/15/14 · Caption 13.
   Labels       DM Mono 500, uppercase, .1em: 13/13/12 and 12. 12px is the floor.

   How to use it:
   - Tags carry the outline, so pick h1–h6 by document structure. A plain
     tag looks right with no class.
   - When the look must differ from the outline (a small h2 in the footer, a
     label that is not a heading), add a .t-* class: <h2 class="t-h4">.
   - Page CSS sets sizes with these tokens only, so a change here reaches
     every page.
   Load this first among a page's stylesheets. */

@font-face {
  font-family: 'Synapse';
  src: url('/fonts/Synapse-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Synapse';
  src: url('/fonts/Synapse-VariableItalic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-sans: 'Synapse', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'DM Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Desktop (>= 1024px) */
  --type-h1: 64px;
  --type-h1-compact: 48px;  /* pages led by a form or card */
  --type-h2: 56px;
  --type-h3: 28px;
  --type-h4: 20px;
  --type-h5: 16px;
  --type-h6: 14px;
  /* Heading leading and tracking, per level (same at every viewport). */
  --type-h1-lh: 1.1;
  --type-h1-ls: -.025em;
  --type-h2-lh: 1.12;
  --type-h2-ls: -.02em;
  --type-h3-lh: 1.2;
  --type-h3-ls: -.01em;
  --type-h4-lh: 1.3;
  --type-h4-ls: -.01em;
  --type-h5-lh: 1.35;
  --type-h6-lh: 1.35;

  --type-lede: 18px;        /* hero descriptions, section ledes */
  --type-body: 16px;        /* section body, paragraphs */
  --type-small: 15px;       /* quotes, card descriptions, helper text */
  --type-caption: 13px;     /* attributions, consent, fine print */
  --type-body-lh: 1.5;

  --type-label: 13px;       /* eyebrows, chart axes (DM Mono) */
  --type-label-s: 12px;     /* chips, diagram tags; the floor for any label */
  --type-label-tracking: .1em;
}

/* Tablet (600–1023px): every iPad in portrait. */
@media (max-width: 1023.98px) {
  :root {
    --type-h1: 48px;
    --type-h1-compact: 40px;
    --type-h2: 40px;
    --type-h3: 24px;
    --type-h4: 18px;
    --type-lede: 17px;
  }
}

/* Mobile (< 600px): phones. */
@media (max-width: 599.98px) {
  :root {
    --type-h1: 34px;
    --type-h1-compact: 32px;
    --type-h2: 28px;
    --type-h3: 22px;
    --type-h5: 15px;
    --type-h6: 13px;
    --type-lede: 16px;
    --type-body: 15px;
    --type-small: 14px;
    --type-label: 12px;
  }
}

/* ---------- Defaults ---------- */
/* :where() keeps these at zero specificity, so any page rule overrides them. */

/* Body size and leading stay on the .t-* classes for now: a body-wide line
   height would be inherited by every element that doesn't set its own. */
:where(body) { font-family: var(--font-sans); }

:where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-sans); }

:where(h1, h2, h3) { font-weight: 400; }
:where(h4, h5, h6) { font-weight: 600; }

:where(h1) { font-size: var(--type-h1); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-ls); }
:where(h2) { font-size: var(--type-h2); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-ls); }
:where(h3) { font-size: var(--type-h3); line-height: var(--type-h3-lh); letter-spacing: var(--type-h3-ls); }
:where(h4) { font-size: var(--type-h4); line-height: var(--type-h4-lh); letter-spacing: var(--type-h4-ls); }
:where(h5) { font-size: var(--type-h5); line-height: var(--type-h5-lh); letter-spacing: 0; }
:where(h6) { font-size: var(--type-h6); line-height: var(--type-h6-lh); letter-spacing: 0; }

/* ---------- Visual classes (look independent of the tag) ---------- */

.t-h1, .t-h1-compact, .t-h2, .t-h3, .t-h4, .t-h5, .t-h6 { font-family: var(--font-sans); }

.t-h1 { font-size: var(--type-h1); font-weight: 400; line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-ls); }
.t-h1-compact { font-size: var(--type-h1-compact); font-weight: 400; line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-ls); }
.t-h2 { font-size: var(--type-h2); font-weight: 400; line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-ls); }
.t-h3 { font-size: var(--type-h3); font-weight: 400; line-height: var(--type-h3-lh); letter-spacing: var(--type-h3-ls); }
.t-h4 { font-size: var(--type-h4); font-weight: 600; line-height: var(--type-h4-lh); letter-spacing: var(--type-h4-ls); }
.t-h5 { font-size: var(--type-h5); font-weight: 600; line-height: var(--type-h5-lh); letter-spacing: 0; }
.t-h6 { font-size: var(--type-h6); font-weight: 600; line-height: var(--type-h6-lh); letter-spacing: 0; }

.t-lede, .t-body, .t-small, .t-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: var(--type-body-lh);
}

.t-lede { font-size: var(--type-lede); }
.t-body { font-size: var(--type-body); }
.t-small { font-size: var(--type-small); }
.t-caption { font-size: var(--type-caption); }

.t-label, .t-label-s {
  font-family: var(--font-mono);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
}

.t-label { font-size: var(--type-label); }
.t-label-s { font-size: var(--type-label-s); }