/* ========================================================================== Tokens — colour, radius and shadow scales for both themes. The theme class (`light` / `dark`) is set on by the inline script in index.html before first paint, so there is never a flash of the wrong theme. ========================================================================== */ :root { --background: oklch(100% 0 0); --foreground: oklch(14.5% 0 0); --card: oklch(100% 0 0); --card-foreground: oklch(14.5% 0 0); --popover: oklch(100% 0 0); --popover-foreground: oklch(14.5% 0 0); --primary: oklch(20.5% 0 0); --primary-foreground: oklch(98.5% 0 0); --secondary: oklch(97% 0 0); --muted: oklch(97% 0 0); --muted-foreground: oklch(55.6% 0 0); --border: oklch(92.2% 0 0); --input: oklch(92.2% 0 0); --ring: oklch(70.8% 0 0); --radius: .625rem; --radius-md: .5rem; --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); /* Panels are outline-only on light, filled on dark. */ --panel-bg: transparent; } .dark { --background: oklch(14.5% 0 0); --foreground: oklch(98.5% 0 0); --card: oklch(20.5% 0 0); --card-foreground: oklch(98.5% 0 0); --popover: oklch(20.5% 0 0); --popover-foreground: oklch(98.5% 0 0); --primary: oklch(92.2% 0 0); --primary-foreground: oklch(20.5% 0 0); --secondary: oklch(26.9% 0 0); --muted: oklch(26.9% 0 0); --muted-foreground: oklch(70.8% 0 0); --border: oklch(100% 0 0 / .1); --input: oklch(100% 0 0 / .15); --ring: oklch(55.6% 0 0); --panel-bg: var(--muted); }