/* ProofStress — shared design tokens + base. ONE source of truth for every page
   (casing_builder, dashboard, home, td_builder, landing, legal). Link it BEFORE the
   page's own <style> so page-local rules still win. Bump ?v= on edit (edge cache).

   Canon: BASIS_OF_DESIGN.md §11.11–§11.15 + frontend/ui_patterns.html.
   Page-specific LAYOUT values (e.g. --sidebar-w: 160 in the workspace, 230 on the
   dashboard) stay in the page — only theme values live here.
   Spacing is not yet codified (AUDIT_UI.md) — copy padding/gaps from the existing
   components rather than inventing a scale. */

:root {
  --paper: #fffef0; --ink: #1a2a1a; --ink2: #4a5a4a; --ink3: #8a9a8a;
  --accent: #2a6a3a; --accent2: #4a9a5a; --accent-dark: #1d4d28;
  --warn: #c05020; --warn-bg: rgba(192,80,32,0.08);
  /* amber = advisory/warning severity (vs --warn = error/blocking). One source of
     truth — see frontend/ui_patterns.html + AUDIT_UI.md (Dimension 1). */
  --amber: #8a5a14; --amber-bg: rgba(200,128,32,0.12); --amber-line: rgba(200,128,32,0.45);
  --border: rgba(80,120,80,0.22); --row-hover: rgba(80,160,100,0.07);
  --sidebar-bg: #1e3d28;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  /* UI primitives — text size by ROLE + corner radius (BoD §11.14, ref ui_patterns.html Part B).
     Values are current-state (invisible repoint); the ABSOLUTE scale is one dial to turn
     after the standard-monitor readability review (~2026-07). Keep --fs-cell (dense grid)
     and --fs-input (form) distinct — do not collapse. (AUDIT_UI.md P1) */
  --fs-caption: 8px; --fs-normal: 9px; --fs-cell: 10px; --fs-input: 11px;
  --r-sm: 2px; --r: 3px;
}

/* Engineer's-notebook grid on the cream paper — every page. (legal.html overrides
   with a fainter 0.10 for long-form reading.) */
body::before {
  content: ''; position: fixed; inset: 0;
  background-image: linear-gradient(rgba(80,160,100,0.13) 1px,transparent 1px), linear-gradient(90deg,rgba(80,160,100,0.13) 1px,transparent 1px);
  background-size: 24px 24px; pointer-events: none; z-index: 0;
}

/* ===== App shell — only pages with <body class="ps-app"> (workspace, dashboard,
   home, T&D). The landing/legal pages are scrolling documents and keep their own
   reset/body. :where() keeps specificity identical to the bare selectors these
   replaced, so no page rule changes precedence. ===== */
:where(.ps-app), :where(.ps-app) *, :where(.ps-app) *::before, :where(.ps-app) *::after { box-sizing: border-box; margin: 0; padding: 0; }
body:where(.ps-app) { font-family: var(--sans); background: var(--paper); color: var(--ink); height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
:where(.ps-app) header { position: relative; z-index: 10; background: var(--accent); color: #e8f4ec; padding: 9px 20px; display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--accent2); flex-shrink: 0; }
:where(.ps-app) header .app-wordmark { display: flex; align-items: center; gap: 8px; color: #e8f4ec; text-decoration: none; line-height: 1; }
:where(.ps-app) header .app-wordmark-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
:where(.ps-app) header .app-wordmark-icon svg { width: 100%; height: 100%; }
:where(.ps-app) header .app-wordmark-name { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 17px; letter-spacing: 0.3px; }