/* ═══════════════════════════════════════════════════════════════
   tokens.css — the v3 design-token system (sub-project B, 2026-05-14)
   The single canonical :root. Linked FIRST on every v3 page, before
   v3.css / product.css. Scales are data-driven (kept the well-used
   values from the audited distribution); migration snaps every raw
   value to its nearest token. See docs/superpowers/specs/.
═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Color — semantic (consolidated from the former v3.css + product.css :roots) ── */
  --bg: #ffffff;
  --bg-2: #f5f3ee;
  --bg-3: #f5f3ee;          /* aliased to --bg-2 */
  --ink: #111111;
  --ink-2: #2b2b2b;
  --ink-3: #5a5a56;
  --muted: #8a8680;
  --line: #dcd7cb;
  --line-2: #c9c3b4;
  --accent: #006EC7;
  --accent-ink: #ffffff;
  --accent-soft: #e6f0fb;
  --bg-soft: #fafaf6;       /* warmer-than-white section bg (between --bg and --bg-2) */
  --bg-tone: #eceae3;       /* tonal section bg (between --bg-2 and --line) */
  --good: #2e5d3b;
  --warn: #8a5a1a;
  --red: #8a2a1a;

  /* ── Color — categorical palette (was raw hex #D49B70 etc.) ── */
  --cat-1: #D49B70;
  --cat-2: #BC7B95;
  --cat-3: #A185BB;
  --cat-4: #7A9BC0;
  --cat-5: #6DAF9F;

  /* ── Type — font families ── */
  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;  /* legacy alias of --sans */

  /* ── Type — font weights ── */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ── Type — discrete font-size scale (px). Display headings keep their
     own clamp() expressions and are not tokenized here. ── */
  --text-9: 9px;
  --text-10: 10px;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-19: 19px;
  --text-24: 24px;
  --text-32: 32px;

  /* ── Type — fixed display sizes (clamp()-based display headings stay inline) ── */
  --text-44: 44px;
  --text-48: 48px;
  --text-80: 80px;
  --text-96: 96px;

  /* ── Icons ── */
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 18px;
  --icon-stroke: 1.6;
  --icon-stroke-bold: 1.8;

  /* ── Spacing scale (px) ── */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-120: 120px;

  /* ── Border radius ── */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-pill: 999px;
  --radius: 10px;          /* legacy token, still referenced as var(--radius); migrated later */
}

/* ── Theme override — "systems" mode. Token *definitions* (a theme variant),
   so the hex values are intentionally literal here. ── */
body[data-mode="systems"] {
  --bg: #f2efe6;
  --bg-2: #ebe7d9;
  --bg-3: #dfdac6;
  --ink: #0f0f0e;
  --line: #d6cfb9;
  --line-2: #bdb499;
  --accent: #d64b1a;
  --accent-ink: #fff8ef;
}