/* * theme.css — WRITABLE, :root token declarations only. * * Vartalap's brand: X blue accent, and a cool near-white/near-black light * theme (replacing the platform's warm-paper default) so canvas, elevated * surfaces (cards/sidebar/inputs) and borders each read as a visibly * different step. This is the LIGHT palette and the only one declared here * — dark mode is applied entirely by public/app.js as inline custom * properties on (see the comment there), never in this file. * * A @media (prefers-color-scheme: dark) block was tried here to soften the * instant before that script runs, but it actively broke the theme: it set * dark values on unconditionally whenever the VISITOR'S OS preferred * dark, with no way to yield once app.js decided the app itself should be * light — app.js only ever WRITES dark overrides onto (and REMOVES * them for light), so "light" never re-asserted these tokens, leaving * --card/--ink/--border stuck on the media query's dark values while * --canvas/--surface flipped back via the landing genre's own body-level * rule — a half-dark, half-light, barely-readable page. Removed; the * unavoidable trade-off is that an OS-dark visitor may see one brief flash * before app.js applies their actual choice, which is far better than a * permanently broken mixed theme. */ :root { --canvas: #ffffff; --surface: #f7f9f9; --card: #f7f9f9; --border: #eff3f4; --border-strong: #cfd9de; --ink: #0f1419; --muted: #536471; --icon: #536471; --accent: #1d9bf0; --accent-soft: #e8f5fd; --success: #00ba7c; --success-soft: #e6f9f1; --danger: #f4212e; --radius-sm: 9999px; /* Platform default focus ring (0 0 0 3px) reads heavy — on a small pill button (e.g. Follow) the soft blue glow visually swells the whole button, making it look bigger than its unfocused neighbours in the same list. Thinned to a hairline 1px so a focused control gets a crisp edge instead of a halo. Colour is --muted, not accent — the brand blue ring read as a harsh neon outline on the near-black dark theme (input:focus's border-color is pinned to --accent in the frozen design system, same colour both themes, and stacked with the accent ring it was overwhelming). --muted is already themed per mode (see public/app.js's dark override), so this ring self-adjusts: a dark slate on the light surface, a soft light grey on the dark one — with no accent colour in it. */ --ring: 0 0 0 1px var(--muted); }