/* Tier 2 — semantic roles. Named by role, no mode in the name, no CSS property in
   the name (VISUAL_DESIGN.md §1.2). Components reference THIS tier only.
   Contrast, checked against §2.6 on near-white canvas (WCAG 2.2 ratios, not rounded):
     fg-default  neutral-950 on canvas  ~10.1:1   check 1 pass
     fg-muted    neutral-800 on canvas   ~5.6:1   check 2 pass (600 = 3.4 fails, 700 = 4.4 marginal)
     link        slate-800   on canvas   ~5.6:1   check 9 pass
     border-input neutral-500 on canvas  ~3.2:1   check 5 pass (300 = 1.4 fails)
     focus-ring  slate-600   on canvas   ~3.4:1   check 6 pass
     fg-on-fill  neutral-50  on ink      ~10.1:1  check 3 pass
   NO DARK MODE. VISUAL_DESIGN.md §14: absent evidence, the page ships light. Adding one
   costs a second lightness list plus a second pass of the twelve checks, and a naive
   inversion that "passes WCAG" is materially worse (§2.5). Reason in readme.md. */
:root{
--bg-canvas:var(--palette-neutral-50);
--bg-raised:#FFFFFF;
--bg-sunken:var(--palette-neutral-100);
--bg-field:#FFFFFF;
--bg-inverse:var(--palette-neutral-950);
--bg-quiet:var(--palette-slate-50);
--bg-selected:var(--palette-neutral-100);

--fg-default:var(--palette-neutral-950);
--fg-secondary:var(--palette-neutral-900);
--fg-muted:var(--palette-neutral-800);
--fg-annotation:var(--palette-slate-800);
--fg-inverse:var(--palette-neutral-50);
--fg-on-fill:var(--palette-neutral-50);

--border-hairline:var(--palette-neutral-200);
--border-rule:var(--palette-neutral-300);
--border-input:var(--palette-neutral-500);
--border-strong:var(--palette-neutral-950);

--action-primary-bg:var(--palette-neutral-950);
--action-primary-bg-hover:var(--palette-neutral-900);
--action-primary-bg-active:var(--palette-neutral-800);
--action-primary-fg:var(--palette-neutral-50);
--action-quiet-bg-hover:var(--palette-neutral-100);
--action-quiet-bg-active:var(--palette-neutral-200);

--link:var(--palette-slate-800);
--link-hover:var(--palette-slate-950);
--focus-ring:var(--palette-slate-600);

--status-positive:var(--palette-green-800);
--status-positive-quiet:var(--palette-green-50);
--status-caution:var(--palette-amber-800);
--status-caution-quiet:var(--palette-amber-50);
--status-critical:var(--palette-red-800);
--status-critical-quiet:var(--palette-red-50);
}
