:root {
  color-scheme: dark;
  --bg: 11 13 18;
  --surface: 18 21 28;
  --surface2: 26 30 40;
  --line: 40 45 58;
  --text: 232 234 240;
  --muted: 140 148 166;
  --accent: 129 140 248;
  --accent-ink: 11 13 18;
  --ok: 74 222 128;
  --warn: 251 191 36;
  --bad: 248 113 113;
}
html[data-accent='emerald'] { --accent: 52 211 153; }
html[data-accent='amber']   { --accent: 251 191 36; }
html[data-accent='rose']    { --accent: 251 113 133; }
html[data-accent='sky']     { --accent: 56 189 248; }

@layer base {
  /* Grid items default to min-width:auto, so one long label can widen the whole column and push the page sideways on phones. */
  .grid > * { min-width: 0; }
}

html, body, #root { min-height: 100%; }
body {
  
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: rgb(var(--accent) / 0.3); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}