/* Logicbomb Media — Typography tokens
 * Two families, each with a clear job:
 *   Familjen Grotesk → display: headings, leads, figures — AND labels/eyebrows/tags
 *                    (uppercase, wide tracking). Tight tracking on display sizes.
 *   Inter          → body: paragraphs, descriptions. Generous line-height.
 * No monospace family. All numeric values are lifted from the proposal deck.
 */
:root {
  /* ---- Families ---- */
  --font-display: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-label:   "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif; /* eyebrows, tags, data */

  /* ---- Weights ---- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Display scale (Familjen Grotesk) ---- */
  --fs-figure:      120px; /* hero figures — "250" */
  --fs-display-1:   82px;  /* h1 / cover */
  --fs-display-2:   46px;  /* h2 / section titles */
  --fs-display-3:   40px;  /* KPI names, closers */
  --fs-lead:        24px;  /* lead paragraph */
  --fs-title:       22px;  /* card titles, steps */
  --fs-subtitle:    19px;  /* feature titles */

  --lh-figure:      0.90;
  --lh-display-1:   0.94;
  --lh-display-2:   1.05;
  --lh-lead:        1.45;

  --ls-figure:     -0.04em;
  --ls-display-1:  -0.04em;
  --ls-display-2:  -0.025em;
  --ls-display-3:  -0.02em;
  --ls-title:      -0.015em;
  --ls-lead:       -0.01em;

  /* ---- Body scale (Inter) ---- */
  --fs-body:        19px;  /* default paragraph */
  --fs-body-sm:     16px;  /* dense descriptions */
  --fs-body-xs:     15px;  /* fine print, feature descriptions */
  --lh-body:        1.6;
  --lh-body-tight:  1.5;

  /* ---- Label scale (Familjen Grotesk, uppercase, wide tracking) ---- */
  --fs-label:       12px;  /* eyebrows, KPI labels */
  --fs-label-sm:    11px;  /* footer chrome, tags, axis */
  --fs-label-xs:    10px;  /* table headers */
  --ls-label:       0.18em; /* eyebrows — widest */
  --ls-label-md:    0.14em; /* KPI / phase labels */
  --ls-label-sm:    0.12em; /* footer chrome */
  --ls-label-tag:   0.10em; /* pill tags */

  /* ---- Semantic role aliases ---- */
  --type-eyebrow-transform: uppercase;
}

/* ---- Surface modes ----
 * "Body" is not one size, because a deck and a doc aren't read the same way.
 * The root values above are the deck mode: 19/1.6, sized for a proposal or a
 * marketing page read in one pass, sometimes projected.
 *
 * A documentation surface — long pages that get scanned and returned to, at
 * arm's length — opts into the doc mode by carrying `.surface-doc`. Same token
 * name, so `--fs-body` always means "the body size for THIS surface" and there
 * is nothing ambiguous left to argue about.
 *
 * Declare the mode on the surface, then read --fs-body / --lh-body downstream.
 * Never hardcode either number.
 */
.surface-doc {
  --fs-body:       16px;
  --fs-body-sm:    15px;
  --fs-body-xs:    14px;
  --lh-body:       1.7;
  --lh-body-tight: 1.55;
}

/* The deck mode, spelled out. The root already carries these values — this
 * exists so a doc surface can drop back into deck type for one section
 * (a pull quote, an embedded cover) without restating the numbers.
 */
.surface-deck {
  --fs-body:       19px;
  --fs-body-sm:    16px;
  --fs-body-xs:    15px;
  --lh-body:       1.6;
  --lh-body-tight: 1.5;
}