trainlog/web/src/theme/tokens.css

46 lines
1.5 KiB
CSS

: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(1rem, 3vw, 3rem);
--radius: 1rem;
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; }