:root {
  /* Surfaces: technical off-white, no pure white */
  --ink: #12161a;
  --paper: #e8ebe4;
  --paper-elevated: #f0f2ec;
  --paper-muted: #d8ddd4;
  --paper-inset: #dfe4d9;

  /* Rules and ink tints */
  --rule: rgba(18, 22, 26, 0.14);
  --rule-strong: rgba(18, 22, 26, 0.28);
  --rule-accent: rgba(13, 122, 107, 0.35);
  --ink-80: rgba(18, 22, 26, 0.82);
  --ink-55: rgba(18, 22, 26, 0.58);
  --ink-35: rgba(18, 22, 26, 0.38);

  /* Single accent: teal signal */
  --signal: #0d7a6b;
  --signal-hover: #0a6357;
  --signal-soft: rgba(13, 122, 107, 0.14);
  --signal-ink: #064a42;
  --accent: var(--signal);

  --warn: #9a4b12;
  --warn-soft: rgba(154, 75, 18, 0.12);
  --danger: #8b1c3a;
  --danger-soft: rgba(139, 28, 58, 0.1);

  /* Typography: system stack, calibrated metrics */
  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-ui: var(--font-display);
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo,
    Consolas, monospace;

  --t-12: 0.75rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-22: 1.375rem;
  --t-28: 1.75rem;
  --t-36: 2.25rem;
  --t-48: 3rem;

  --lh-tight: 1.12;
  --lh-snug: 1.35;
  --lh-body: 1.55;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 40px;
  --s-6: 64px;
  --s-7: 96px;

  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;

  --container-max: 1100px;
  --container-narrow: 620px;
  --nav-h: 52px;

  --focus-ring: 0 0 0 2px var(--paper-elevated), 0 0 0 4px var(--signal);
  --border-hairline: 1px solid var(--rule);
  --border-strong: 1px solid var(--rule-strong);
}