/* Design tokens + reset. The console's local variable NAMES are aliased to the
   shared Atoms tokens (static/css/ag-tokens.css) so every screen/component
   inherits the Atoms look and light/dark themes automatically. */
:root {
  --bg: var(--ag-page-bg); --panel: var(--ag-card-bg);
  --ink: var(--ag-text-primary); --ink-2: var(--ag-text-main);
  --ink-3: var(--ag-text-muted); --ink-4: var(--ag-text-secondary);
  --line: var(--ag-border); --line-2: var(--ag-border-light);
  --ok: var(--ag-success); --warn: var(--ag-warning); --crit: var(--ag-danger);
  --ok-bg: var(--ag-success-bg); --warn-bg: var(--ag-warning-bg); --crit-bg: var(--ag-danger-bg);
  --accent: var(--ag-accent); --accent-soft: var(--ag-accent-soft);
  --hover: var(--ag-hover-bg); --selected: var(--ag-selected-bg);
  /* premium: elevation, focus, motion — aliased so every component can use them */
  --shadow-xs: var(--ag-shadow-xs); --shadow-sm: var(--ag-shadow-sm); --shadow-card: var(--ag-shadow-card);
  --highlight: var(--ag-highlight);
  --ring: var(--ag-ring); --halo: var(--ag-halo);
  --ease: var(--ag-ease); --dur-fast: var(--ag-dur-fast); --dur-med: var(--ag-dur-med);
  --r: var(--ag-r-md); --fs: 12px; --fs-sm: 11px; --fs-lg: 13px;
  --mono: var(--ag-mono); --sans: var(--ag-sans);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: var(--fs)/1.45 var(--sans); -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.tnum { font-variant-numeric: tabular-nums; font-family: var(--mono); }
.mono { font-family: var(--mono); }
.row { display: flex; align-items: center; gap: 8px; }
:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 2px var(--accent)); border-radius: var(--r); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}