/*
 * Design tokens.
 *
 * Values are measured from the live sites, not chosen — see docs/CLONE-SPEC.md
 * for how to re-measure. Both brands share the type scale, the accent and the
 * container; only the logo and a few accents differ, so brand overrides sit at
 * the bottom rather than forking the whole sheet.
 */

:root {
  /* Brand */
  --c-accent: #2f53c8;          /* nav pill, primary buttons, links */
  --c-accent-deep: #2451d0;     /* the slightly deeper blue on slide buttons */
  --c-accent-hover: #1e3fa8;

  /* Ink and surface */
  --c-ink: #191d27;             /* headings */
  --c-ink-strong: #000;         /* hero headings */
  --c-body: #6b6b6b;            /* body copy */
  --c-surface: #fff;
  --c-surface-alt: #f1f1f1;     /* footer */
  --c-line: #e6e6e6;

  /* Type — Plus Jakarta Sans at 500 is the site's default, not 400.
     Poppins is the second face and BOTH brands use it, which took two goes to
     establish: MarketBuilder sets most of its page in it, SupplyQuote only its
     hero and its footer lists — but "only" still means every page, since the
     footer is on all of them. */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-alt: Poppins, var(--font);

  --t-body: 500 16px/28px var(--font);
  --t-h1: 700 60px/66px var(--font-alt);
  --t-h2: 600 40px/56px var(--font);
  --t-h3: 600 40px/52px var(--font);
  --t-nav: 600 16px/22.4px var(--font);

  /* The hero heading is set at its natural tracking; only the h3 scale is
     tightened on the live pages. */
  --ls-h1: normal;
  --ls-h3: -1.5px;

  /* Layout — --container is the content width, measured off the live pages at
     1290px between 75px margins on a 1440 viewport. */
  --container: 1290px;
  --gutter: 12px;
  --radius: 10px;
  --radius-pill: 50px;
  --header-h: 67px;

  /* Rhythm */
  --space-section: 90px;
  --space-block: 40px;
}

/*
 * MarketBuilder. Where SupplyQuote's hero is Poppins at 700/60, MB's is Jakarta
 * at 600/46 — the two brands swap faces at the top of the page, so this has to
 * name `--font` explicitly rather than inherit the base h1.
 *
 * MB uses Poppins far more widely than SQ does — the section headings, the card
 * titles and descriptions, the BENEFITS button — but the token itself is global
 * now, because SQ's hero and both footers need it too.
 */
[data-brand="mb"] {
  --t-h1: 600 46px/1.4 var(--font);
}