/* ATLAS · tokens/scale.css — AuditHunt
 * Provenance: Phase 0 amendment · extracted 2026-04-28
 * Spec: DESIGN-BIBLE-v3 §D.3, §D.4 + DESIGN_SYSTEM_PHILOSOPHY Part VI Layer 4
 *
 * The fourth and final token layer. Loaded after easing → depth → type.
 * Canonical type scale, 8px spacing rhythm, border-radii.
 *
 * Values are authoritative here. brand.css retains duplicates for
 * backwards-compatibility only — do not edit them there independently.
 */

:root {
  /* ── Type scale (13 sizes) ─────────────────────────────────────
     Named by optical role, not by px value. Never use raw px for
     font-size in component CSS — always reference a --fs-* token. */
  --fs-2xs:   9px;    /* micro labels, keyboard shortcut tags */
  --fs-xs:    10.5px; /* eyebrow / mono caps */
  --fs-sm:    12px;   /* code blocks, table captions */
  --fs-base:  14px;   /* small body, annotations */
  --fs-md:    16px;   /* default body */
  --fs-lg:    18px;   /* large body, lede */
  --fs-xl:    22px;   /* sub-headings */
  --fs-2xl:   32px;   /* section heads */
  --fs-3xl:   48px;   /* h2 display */
  --fs-4xl:   64px;   /* h1 display */
  --fs-5xl:   80px;   /* hero display */
  --fs-6xl:   96px;   /* large hero */
  --fs-hero:  clamp(48px, 7.6vw, 116px); /* fluid hero — index.html h1 */

  /* ── Spacing rhythm (8px grid, 12 steps) ──────────────────────
     All margins, paddings, gaps must use these. No literal px
     values in component CSS. Exception: 1px hairlines. */
  --s-0:   0;
  --s-1:   4px;    /* micro — icon gaps, tight badges */
  --s-2:   8px;    /* base unit */
  --s-3:   12px;   /* compact stacks */
  --s-4:   16px;   /* standard element gap */
  --s-5:   24px;   /* comfortable gap */
  --s-6:   32px;   /* section sub-unit */
  --s-7:   48px;   /* section element gap */
  --s-8:   64px;   /* section inner padding */
  --s-9:   96px;   /* section padding / scroll-margin-top */
  --s-10:  128px;  /* large section gap */
  --s-11:  192px;  /* page-level bottom padding */

  /* ── Border radii ──────────────────────────────────────────────
     Flat is the default posture. Radii are restrained and semantic. */
  --r-none: 0;
  --r-sm:   4px;   /* cards, contract-card, finding-card */
  --r-md:   6px;   /* buttons */
  --r-lg:   6px;   /* historical alias — prefer --r-md for new work */
  --r-pill: 999px; /* status chips only — the only true pills */

  /* ── Layout ────────────────────────────────────────────────── */
  --maxw:      1240px; /* max content width */
  --pad:       28px;   /* horizontal page padding */
  --nav-h:     72px;   /* fixed nav height — main gets padding-top: var(--nav-h) */
  --scroll-mt: var(--s-9); /* universal scroll-margin-top for hash targets */

  /* ── Line heights ──────────────────────────────────────────────
     Named by use, not ratio. */
  --lh-tight:   0.96;  /* hero display headlines */
  --lh-snug:    1.1;   /* h2/h3 */
  --lh-base:    1.55;  /* body copy */
  --lh-loose:   1.7;   /* long-form prose */
  --lh-mono:    1.6;   /* code blocks */
}

/* ── Scroll margin — applied globally to all heading/section hash targets ─ */
:where(h1, h2, h3, h4, section[id], div[id]) {
  scroll-margin-top: var(--scroll-mt);
}