/* static/tokens.css — AlignCube "Emerald Modern" design tokens (canonical VALUES)
   Spec: proposals/aligncube-design-spec-emerald-modern-2026-06-25.md
   Load this FIRST (before chrome.css and any page styles).

   SCOPE, stated honestly (corrected 2026-07-30 — it used to claim "single source
   of truth", which was false and had already misled): this file is LOADED by the
   marketing/public pages. The signed-in app shell loads only static/app.css,
   which declares its OWN :root block. So these two files never load together and
   cannot override each other — but any token defined in BOTH must carry the SAME
   value, or one semantic role renders two different inks across the product.
   That drift was real: --text-1 was #0a120c here and #15201a in app.css,
   --text-3 was #4d564c here and #6b7269 there. app.css now matches this file
   (both changes also improved contrast: 15.3->17.4 and 4.5->7.0 against --bg).
   test_design_tokens.py fails if the shared tokens ever diverge again.

   When adding a token that both halves need: put the value here, mirror it in
   app.css, and the gate keeps them honest. */

/* Display: Bricolage Grotesque · Body: Inter · Numerals: IBM Plex Mono */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Surfaces ── */
  --bg: #f4f5f1;            /* off-white "ledger paper" page background (NOT warm cream) */
  --surface: #fcfdfb;       /* card / document surface, near-white */
  --border: #e1e6df;        /* cards / panels */
  --border-rule: #eceee9;   /* thin section separators */
  --border-row: #f2f4f0;    /* table row separators */

  /* ── Ink (text) ── */
  --text-1: #0a120c;        /* headings */
  --text-body: #111814;     /* body */
  --text-2: #4d564c;        /* secondary */
  --text-3: #4d564c;        /* de-emphasized metadata labels ONLY — never essential text */

  /* ── Emerald (brand signature) ── */
  --accent: #036c4f;        /* text / links / buttons — AA-safe on white */
  --accent-deep: #02573f;   /* large headlines & primary hero numbers */
  --accent-graphic: #10b981;/* cube fill & graphic accents — NEVER use as text on white (fails AA) */
  --accent-light: #34d399;  /* hover / light fills */

  /* ── Verdict colors (all AA-safe on white) ── */
  --keep: #024c37;          /* semantic green, AAA on light; NOT --accent */
  --review: #d97706;        /* amber */
  --consolidate: #b45309;   /* amber / clay */
  --cut: #b91c1c;           /* crimson */

  /* ── Layout ── */
  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 1px 3px rgba(21, 32, 26, 0.08);
  --shadow-lg: 0 4px 12px rgba(21, 32, 26, 0.10);
  --maxw: 1120px;

  /* ── Typography stacks ── */
  --font-display: 'Bricolage Grotesque', Inter, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}