/* Design tokens — 8px scale, dark professional theme (skill: #0f1115..#1a1d23, softened text) */
:root {
  /* surfaces */
  --bg-0: #0f1115;   /* app background */
  --bg-1: #15181e;   /* panels */
  --bg-2: #1a1d23;   /* raised elements */
  --bg-3: #22262e;   /* hover/inputs */
  --line: #2a2f38;   /* 1px borders */
  --line-soft: #23272f;
  /* text */
  --tx-0: #e5e7eb;   /* primary */
  --tx-1: #9aa3af;   /* secondary */
  --tx-2: #6b7280;   /* muted */
  /* brand + semantic */
  --accent: #4aa3ff;
  --accent-dim: #2c6fb8;
  --ok: #34d399;
  --warn: #f0b429;
  --danger: #ef4444;
  /* geometry */
  --r: 10px;         /* single radius */
  --s: 8px;          /* spacing unit */
  /* type scale 32/24/18/16/14/12 */
  --f-xs: 12px; --f-sm: 14px; --f-md: 16px; --f-lg: 18px; --f-xl: 24px; --f-2xl: 32px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 1px 8px rgba(0,0,0,.22);
  --shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
}
html { font-size: 16px; }
body {
  margin: 0; font-family: var(--font); background: var(--bg-0); color: var(--tx-0);
  font-size: var(--f-sm); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: var(--f-lg); letter-spacing: .2px; }
h2 { font-size: var(--f-md); }
h3 { font-size: var(--f-sm); }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--tx-1); }
.dim   { color: var(--tx-2); }
.caps  { text-transform: uppercase; letter-spacing: .8px; font-size: var(--f-xs); font-weight: 600; color: var(--tx-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}