/* ══════════════════════════════════════════════════════════════════════════
   SYNEXIS TYPOGRAPHY — THE SINGLE SOURCE OF TRUTH
   ══════════════════════════════════════════════════════════════════════════

   WHY THIS FILE EXISTS
   Five stylesheets each defined --font-heading / --font-body / --font-primary
   with their own literal font stacks (home.css, synexis-brand.css,
   synexis-site.css, synexis-system.css, synexis-v10.css). Whichever loaded last
   won, so the rendered typeface depended on which page you were on — the
   homepage resolved to Inter while every other route resolved to Schibsted
   Grotesk. Individual pages then invented their own clamp() scales on top,
   producing H1s at 66px on two Service pages and 62px on two others.

   Everything now derives from the tokens below. The other stylesheets alias to
   --font-primary rather than restating a stack, so the typeface is ONE value.

   CHANGING THE TYPEFACE
   Change --font-primary here and reload. Nothing else needs editing.
   If the family changes, update the weights requested in index.html to match —
   a weight that is not loaded gets synthesised by the browser into a fake bold.

   SCALE AUTHORITY
   The H1/H2/H3 scale is derived from the Synexis Core hero, which is the master
   reference. Pages consume the tokens; they do not define their own sizes.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── FAMILY ────────────────────────────────────────────────────────────
     Inter is the approved website typeface. Arial/Helvetica are metric-ish
     fallbacks that hold layout if the webfont is slow. */
  --font-primary: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Monospace is a FUNCTIONAL exception only — code, and technical readouts
     inside product visuals. Not for eyebrows: an eyebrow gets its technical
     feel from tracking and case, not from a different family. */
  --font-system: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── ALIASES ───────────────────────────────────────────────────────────
     Historic names kept so ~700 existing declarations keep working. They all
     resolve to one family; none of them is an independent typeface any more. */
  --font-heading: var(--font-primary);
  --font-body:    var(--font-primary);
  --font-display: var(--font-primary);
  --font-sans:    var(--font-primary);
  --font-ui:      var(--font-primary);
  --font-mono:    var(--font-system);
  --synexis-sans: var(--font-primary);

  /* ── SCALE ─────────────────────────────────────────────────────────────
     Derived from the Core hero. Every size is a clamp so it scales with the
     viewport centrally — pages must not add their own. */
  --type-display-size:   clamp(34px, 4.4vw, 62px);
  --type-display-weight: 800;
  --type-display-lh:     1.03;
  --type-display-ls:     -0.035em;

  --type-h1-size:   clamp(32px, 4.2vw, 58px);
  --type-h1-weight: 800;
  --type-h1-lh:     1.05;
  --type-h1-ls:     -0.034em;

  --type-h2-size:   clamp(25px, 3.1vw, 44px);
  --type-h2-weight: 800;
  --type-h2-lh:     1.08;
  --type-h2-ls:     -0.03em;

  --type-h3-size:   clamp(17px, 1.6vw, 22px);
  --type-h3-weight: 700;
  --type-h3-lh:     1.25;
  --type-h3-ls:     -0.022em;

  --type-body-lg-size: clamp(15px, 1.3vw, 18.5px);
  --type-body-lg-lh:   1.62;
  --type-body-size:    clamp(14.5px, 1.15vw, 16.5px);
  --type-body-lh:      1.6;
  --type-small-size:   13px;
  --type-small-lh:     1.55;

  /* labels/eyebrows: Inter, with tracking and case doing the work */
  --type-label-size:   11px;
  --type-label-weight: 700;
  --type-label-ls:     0.13em;

  --type-button-size:   15px;
  --type-button-weight: 700;
  --type-button-ls:     -0.01em;

  --type-nav-size:   15px;
  --type-nav-weight: 600;
  --type-nav-ls:     -0.01em;

  /* ── READING WIDTHS ───────────────────────────────────────────────────
     Paragraph width is part of the typography system, not a per-page choice. */
  --measure-hero:  60ch;
  --measure-body:  68ch;
  --measure-card:  46ch;
  --measure-long:  78ch;
}

/* ── FORM CONTROLS ────────────────────────────────────────────────────────
   Browsers default these to a system font regardless of what the page sets, so
   they must inherit explicitly or every input, select and button on the site
   silently falls out of the typeface. */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* ── UTILITY CLASSES ──────────────────────────────────────────────────────
   For new work. Existing pages inherit correctly through the aliases above, so
   nothing has to be migrated to these to be consistent. */
.t-display { font-family: var(--font-primary); font-size: var(--type-display-size); font-weight: var(--type-display-weight); line-height: var(--type-display-lh); letter-spacing: var(--type-display-ls); }
.t-h1 { font-family: var(--font-primary); font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-ls); }
.t-h2 { font-family: var(--font-primary); font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-ls); }
.t-h3 { font-family: var(--font-primary); font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-lh); letter-spacing: var(--type-h3-ls); }
.t-body-lg { font-family: var(--font-primary); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); max-width: var(--measure-body); }
.t-body { font-family: var(--font-primary); font-size: var(--type-body-size); line-height: var(--type-body-lh); max-width: var(--measure-body); }
.t-small { font-family: var(--font-primary); font-size: var(--type-small-size); line-height: var(--type-small-lh); }
.t-label { font-family: var(--font-primary); font-size: var(--type-label-size); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-ls); text-transform: uppercase; }