:root {
  color-scheme: dark;
  --crust: #11111b;
  --mantle: #181825;
  --base: #1e1e2e;
  --surface-0: #313244;
  --surface-1: #45475a;
  --surface-2: #585b70;
  --overlay-1: #7f849c;
  --text: #cdd6f4;
  --subtext-0: #a6adc8;
  --lavender: #b4befe;
  --mauve: #cba6f7;
  --blue: #89b4fa;
  --sapphire: #74c7ec;
  --green: #a6e3a1;
  --yellow: #f9e2af;
  --peach: #fab387;
  --red: #f38ba8;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  /* CONTRACT: functional Web text starts at 12px. The scale keeps Trainlog's
     compact TUI character without making labels or metadata microscopic. */
  --font-size-xs: .75rem;
  --font-size-sm: .8125rem;
  --font-size-md: .9375rem;
  --font-size-lg: 1.0625rem;
  --font-size-xl: 1.5rem;
  --font-size-display: clamp(2.25rem, 5vw, 4.5rem);
  --shell-gutter: clamp(0.9rem, 2vw, 2rem);
  --radius: 0.78rem;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--crust);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body, #root { min-width: 20rem; min-height: 100%; margin: 0; }
body { min-height: 100vh; background: var(--crust); }
button, a { font: inherit; }
a { color: inherit; }
::selection { color: var(--crust); background: var(--lavender); }
:focus-visible { outline: 2px solid var(--lavender); outline-offset: 4px; border-radius: .25rem; }