/* ============================================================================
   Foundation: design tokens, reset, typography, focus, motion, utilities.
   Loaded before app.css. See plan/GUI-DESIGN.md ("restrained operational").
   Legacy variable names (--red, --ink, --line …) are aliased at the bottom so
   existing rules follow the tokens; new rules should use the token names.
   ========================================================================== */
:root {
  /* colour — brand and frame */
  --color-brand-600: #b5121b;      /* DFMRT red: brand, primary actions, critical states */
  --color-brand-700: #8c0e15;
  --color-brand-050: #fbe9ea;      /* pale red tint for critical badges/active nav */
  --color-frame-900: #171c24;      /* graphite application frame */
  --color-frame-800: #222936;
  --color-frame-text: #e6e9ef;
  --color-frame-muted: #9aa3b2;
  /* colour — surfaces and text */
  --color-canvas: #f3f5f7;
  --color-surface: #ffffff;
  --color-surface-2: #f7f8fa;      /* hover rows, quiet panels */
  --color-border: #dfe3e8;
  --color-text: #1b2028;
  --color-text-2: #4b5262;
  --color-muted: #667085;
  /* colour — semantic (dark text on pale tint) */
  --color-ok: #1e7f4f;       --color-ok-bg: #e3f2ea;
  --color-warn: #b26a00;     --color-warn-bg: #fff3df;
  --color-serious: #b5121b;  --color-serious-bg: #fbe9ea;
  --color-info: #10618f;     --color-info-bg: #e9f3fa;   --color-info-border: #b5d6ea;
  --color-neutral: #5b6472;  --color-neutral-bg: #eef0f3;
  /* spacing rhythm 4/8/12/16/24/32/48 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
  /* shape and elevation */
  --radius-control: 6px;
  --radius-panel: 8px;
  --shadow-1: 0 1px 2px rgba(20, 24, 33, .06);
  --shadow-2: 0 6px 24px rgba(20, 24, 33, .16);   /* drawers, menus, dialogs only */
  /* interaction */
  --target-min: 44px;
  --motion-fast: 150ms;
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-brand-600);
  /* type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-body: 15px;
  --text-small: 13px;
  --text-h1: 26px;
  --text-h2: 17px;
}
@media (max-width: 560px) {
  :root { --text-h1: 22px; }
}

/* ---- reset-ish ---- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }  /* the hidden attribute must beat display rules on .btn/.actions */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-canvas); color: var(--color-text);
  font: var(--text-body)/1.5 var(--font-sans);
}
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---- typography ---- */
h1 { font-size: var(--text-h1); line-height: 1.2; font-weight: 700; margin: 0 0 var(--space-4); letter-spacing: -.01em; }
h2 { font-size: var(--text-h2); line-height: 1.3; font-weight: 600; margin: 0 0 var(--space-3); }
small, .muted { color: var(--color-muted); }
small { font-size: var(--text-small); }
a { color: var(--color-brand-700); }
/* operational numbers (serials, dates, counts) line up in columns */
.num, td.num, .stat .n, code.uid, time { font-variant-numeric: tabular-nums; }

/* ---- focus: visible ring for keyboard users, never removed without replacement ---- */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-control); }
.topbar :focus-visible, .sidenav :focus-visible { box-shadow: 0 0 0 2px var(--color-frame-900), 0 0 0 4px #fff; }

/* ---- visually hidden (screen-reader-only text, e.g. icon button labels) ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- skip link ---- */
.skip-link {
  position: absolute; left: var(--space-2); top: -100px; z-index: 100;
  background: var(--color-surface); color: var(--color-text); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control); box-shadow: var(--shadow-2); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--space-2); }

/* ---- motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
}

/* ---- legacy aliases (app.css still uses these) ---- */
:root {
  --red: var(--color-brand-600);
  --red-dark: var(--color-brand-700);
  --ink: var(--color-text);
  --ink-2: var(--color-text-2);
  --ink-3: var(--color-muted);
  --surface: var(--color-canvas);
  --card: var(--color-surface);
  --line: var(--color-border);
  --ok: var(--color-ok);
  --warn: var(--color-warn);
  --serious: var(--color-serious);
  --neutral: var(--color-neutral);
  --radius: var(--radius-panel);
  --shadow: var(--shadow-1);
}