:root {
  /* Steel-cool neutrals — light */
  --bg: #f4f5f7;
  --bg-elev: #ffffff;
  --bg-sunken: #ebedf0;
  --border: #dfe2e7;
  --border-strong: #c8ccd3;
  --fg: #0e1116;
  --fg-muted: #5b6470;
  --fg-faint: #8a93a0;

  /* Blueprint accent */
  --accent: #2b6fff;
  --accent-hover: #1f5be6;
  --accent-soft: rgba(43,111,255,.10);
  --accent-fg: #ffffff;

  /* Status */
  --ok:        #1f8a4a;  --ok-soft:   rgba(31,138,74,.10);
  --warn:      #b8730a;  --warn-soft: rgba(184,115,10,.12);
  --err:       #c0392b;  --err-soft:  rgba(192,57,43,.10);

  /* Type */
  --font-sans:  "Geist", "Inter", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --font-serif: "Instrument Serif", Georgia, serif;

  /* Geometry */
  --radius:    6px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --shadow:    0 1px 3px rgba(15,23,42,.06), 0 8px 24px -8px rgba(15,23,42,.08);

  /* Legacy aliases — keep old style.css working during migration */
  --surface:    var(--bg-elev);
  --text:       var(--fg);
  --muted:      var(--fg-muted);
  --primary:    var(--accent);
  --primary-dk: var(--accent-hover);
  --primary-lt: var(--accent-soft);
  --success:    var(--ok);
  --danger:     var(--err);
  --warning:    var(--warn);
  --shadow-md:  var(--shadow);
  --sidebar-w:  232px;
  --header-h:   56px;
  --bottom-nav-h: 72px;
}

[data-theme="dark"] {
  --bg: #0c0e12; --bg-elev: #14171c; --bg-sunken: #090b0f;
  --border: #1f242c; --border-strong: #2c333d;
  --fg: #e8ebf0; --fg-muted: #8a93a0; --fg-faint: #5b6470;
  --accent: #4f88ff; --accent-hover: #6699ff;
  --accent-soft: rgba(79,136,255,.14); --accent-fg: #06080b;
  --ok: #3ddc84;  --ok-soft:   rgba(61,220,132,.10);
  --warn: #f5a623; --warn-soft: rgba(245,166,35,.12);
  --err: #ff5d4d;  --err-soft:  rgba(255,93,77,.10);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow:    0 1px 3px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.6);
}

/* ── Page header — shared across all inner pages ── */
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.page-header__title { min-width: 0; }
.page-header h1 {
  font-family: var(--font-sans);
  font-size: 22px; font-weight: 600; line-height: 1.2;
  color: var(--fg); margin: 0;
}
.page-header__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--fg-faint);
  margin: 0 0 4px;
}
.page-header__sub { font-size: 13px; color: var(--fg-muted); margin: 4px 0 0; }
.page-header__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }