/* ════════════════════════════════════════════════════════════════════════════
 * design-tokens.css — Mockup B (Sovereign Instrument)
 *
 * Single source of truth for colour, typography, spacing, and rule values
 * used by the rebuilt autonodal.com landing.
 *
 * Reference: CC-PROMPT-autonodal-landing-rebuild.md §Phase 1
 *
 * Rules:
 *   - Each colour has exactly one semantic job (oxblood = brand, ink blue =
 *     trust, ochre = single atmospheric moment). Do NOT cross-pollinate.
 *   - Type-size and spacing values are locked. Do not nudge.
 *   - The Aⁿ mark proportions (in the page CSS, not here) are also locked.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Web fonts ────────────────────────────────────────────────────────── */
/* Public Sans (200-700) — display + body.
 * IBM Plex Mono (300/400/500) — mono accents (labels, section numbers, cadence).
 * Newsreader (400/500 + italic) — Aⁿ mark and footer brand only.
 * font-display: swap to prevent FOIT; size-adjust hints applied below.
 */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..500;1,6..72,400..500&family=Public+Sans:wght@200..700&family=IBM+Plex+Mono:wght@300;400;500&display=swap');

:root {
  /* ── Surface + ink ───────────────────────────────────────────────── */
  --bg:         #fafaf6;   /* warm cool-white page background */
  --text:       #0a0a0a;   /* primary text — headlines, body */
  --text-mute:  #2a2a2a;   /* body lede + paragraph text */
  --text-meta:  #707070;   /* mono labels, section numbers */
  --rule:       #e6e6e3;   /* hairline rules between sections */
  --rule-soft:  #ececea;   /* secondary hairlines (footer inner divider) */

  /* ── Brand register — oxblood ────────────────────────────────────── */
  /* Jobs: Aⁿ logo italic n, hero label hairline, primary CTA fill. */
  --ink:        #6b2222;   /* oxblood — primary brand accent */
  --ink-deep:   #561919;   /* oxblood deep — reserved (future hover/focus on brand) */

  /* ── Trust register — ink blue ───────────────────────────────────── */
  /* Jobs: primary CTA hover, Limited Use disclosure link, footer link hover. */
  --blue:       #1d3d6e;   /* ink blue — trust accent */
  --blue-deep:  #15305a;   /* ink blue deep — hover/focus on trust elements */

  /* ── Atmosphere — ochre (single use) ─────────────────────────────── */
  /* Job: hero cadence bullet dots only. Held back. Do not reuse. */
  --ochre:      #b8862b;

  /* ── Typography stacks ───────────────────────────────────────────── */
  --font-sans:   "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font-serif:  "Newsreader", Georgia, "Times New Roman", serif;

  /* ── Type sizes (locked) ─────────────────────────────────────────── */
  --type-h1:        clamp(40px, 6vw, 72px);
  --type-h2:        clamp(28px, 3.4vw, 42px);
  --type-positioning: clamp(22px, 2.6vw, 32px);
  --type-lede:      19px;
  --type-body:      17px;
  --type-moment:    19px;   /* §05 Built for items */
  --type-step:      22px;   /* step h3 */
  --type-mono-meta: 12px;   /* masthead meta + footer mono */
  --type-mono-label: 11px;  /* label-mono before hero, section numbers */
  --type-mono-cadence: 13px;
  --type-foot-use:  13px;   /* footer Limited Use disclosure (Public Sans) */

  /* ── Line heights ────────────────────────────────────────────────── */
  --lh-h1:          1.04;
  --lh-h2:          1.16;
  --lh-body:        1.68;
  --lh-lede:        1.62;
  --lh-cadence:     2.1;
  --lh-foot-use:    1.6;
  --lh-positioning: 1.3;

  /* ── Letter-spacing (locked tightening for display) ──────────────── */
  --ls-h1:          -0.028em;
  --ls-h2:          -0.022em;
  --ls-positioning: -0.018em;
  --ls-mono-label:  0.14em;
  --ls-mono-meta:   0.04em;
  --ls-mono-section: 0.12em;

  /* ── Spacing rhythm ──────────────────────────────────────────────── */
  --wrap-max:       880px;
  --wrap-pad-x:     40px;
  --wrap-pad-top:   64px;
  --wrap-pad-bot:   144px;
  --section-pad:    96px;     /* vertical padding per section */
  --hero-hairline-w: 28px;    /* width of hairline before label-mono */
  --footer-mt:      144px;
  --foot-inner-mt:  64px;     /* gap between Limited Use block and meta row */
  --foot-inner-pad: 32px;     /* padding-top above meta row */

  /* ── Focus ring ──────────────────────────────────────────────────── */
  --focus-ring:     0 0 0 2px var(--ink), 0 0 0 4px var(--bg);

  /* ── Max-widths for prose ────────────────────────────────────────── */
  --max-h1:         14ch;
  --max-h2:         22ch;
  --max-body:       60ch;
  --max-lede:       60ch;
  --max-moment:     54ch;
  --max-positioning: 28ch;
  --max-foot-use:   56ch;
  --max-foot-copy:  32ch;
}

/* ─── Mobile breakpoint overrides — applied via media query in page CSS,
 *      not here. design-tokens.css stays static and predictable. ────── */