:root {
  /* Fluxline.pro uses Inter (variable, preloaded on the live site) with system fallbacks. */
  --fx-font: 'inter-variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  /* Monospace: code, data readouts, timestamps, "ritual text" accents. */
  --fx-font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* User-adjustable font scale (Preferences → Font Size). 1 = 100%.
     Multiplied into every px-based size token below so the slider scales text. */
  --fx-font-scale: 1;

  --fx-mono-size: calc(13.5px * var(--fx-font-scale));
  --fx-mono-leading: 1.6;

  /* ===== Display / headings ===== */
  --fx-display-size: calc(clamp(48px, 5vw, 64px) * var(--fx-font-scale));  /* hero wordmark ONLY */
  --fx-display-404: calc(clamp(80px, 14vw, 150px) * var(--fx-font-scale)); /* @kind font */ /* 404 numeral */
  --fx-display-weight: 800;
  --fx-display-tracking: 0.06em;              /* display is TRACKED OUT, not tight */

  --fx-h1-size: calc(38px * var(--fx-font-scale));
  --fx-h1-weight: 800;
  --fx-h2-size: calc(34px * var(--fx-font-scale));
  --fx-h2-weight: 700;
  --fx-h3-size: calc(23px * var(--fx-font-scale));
  --fx-h3-weight: 700;
  --fx-heading-tracking: -0.01em;
  --fx-band-h2-size: calc(36px * var(--fx-font-scale));        /* CTA-band h2 (band headings run 34–36) */

  /* ===== Long-form article headings (Blog Post) ===== */
  --fx-article-h1: calc(clamp(30px, 4.5vw, 40px) * var(--fx-font-scale)); /* @kind font */
  --fx-article-h2: calc(25px * var(--fx-font-scale));
  --fx-article-h3: calc(18.5px * var(--fx-font-scale));

  /* ===== Subhead (teal statement line under headings) ===== */
  --fx-subhead-size: calc(19px * var(--fx-font-scale));
  --fx-subhead-weight: 600;

  /* ===== Body ===== */
  --fx-body-size: calc(16px * var(--fx-font-scale));
  --fx-body-leading: 1.7;
  --fx-body-sm-size: calc(13.5px * var(--fx-font-scale));
  --fx-body-sm-leading: 1.6;

  /* ===== Labels ===== */
  --fx-kicker-size: calc(12px * var(--fx-font-scale));         /* uppercase section kickers, teal */
  --fx-kicker-tracking: 0.12em;
  --fx-eyebrow-size: calc(15px * var(--fx-font-scale));        /* hero "WELCOME TO" eyebrow */
  --fx-eyebrow-tracking: 0.28em;  /* hero eyebrow tracking */
  --fx-meta-size: calc(12.5px * var(--fx-font-scale));         /* dates, counts, fine print */
  --fx-cta-link-size: calc(12.5px * var(--fx-font-scale));     /* "LEARN MORE ›" links, teal, 700, 0.08em */
  --fx-cta-link-tracking: 0.08em;

  /* ===== Fluid / container-based sizing (16px rem base; cqi = container inline size) =====
     Give the wrapping element `container-type: inline-size` and size text with these.
     Browser-viewport media queries are reserved for device class only (see layout.css). */
  --fx-fluid-display: clamp(2.5em, 5cqi, 3.5em); /* @kind font */
  --fx-fluid-h2: clamp(1.75em, 4cqi, 2.5em); /* @kind font */
  --fx-fluid-body: clamp(1em, 3cqi, 1.25em); /* @kind font */
  --fx-fluid-caption: clamp(0.75em, 2cqi, 1em); /* @kind font */
  --fx-fluid-mono: clamp(0.875em, 2.5cqi, 1.125em); /* @kind font */
}