/* Config colors: use valid CSS color values (Tailwind v4 compatible) */ :root { color: var(--on-surface, rgb(51 51 51)); --color-white: rgb(255 255 255); --color-black: rgb(51 51 51); --color-primary: rgb(87 119 237); --color-gray-100: rgb(247 247 250); --color-gray-200: rgb(237 237 237); --color-gray-300: rgb(215 217 221); --color-gray-400: rgb(161 168 179); --color-gray-800: rgb(37 44 67); --color-gray-900: rgb(33 37 41); --color-error: rgb(224 16 16); --color-app-background: var(--color-gray-100); --color-app-card: var(--color-white); --primary-font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, Helvetica Neue, sans-serif; /* Semantic surface tokens — light defaults, overridden in .dark */ --surface: var(--color-white); --on-surface: var(--color-black); --surface-alt: var(--color-gray-100); --on-surface-muted: var(--color-gray-800); --border-color: var(--color-gray-300); --border-subtle: var(--color-gray-200); } /* Dark mode overrides — activated when JS adds .dark to */ .dark { /* Semantic surface overrides (--color-white and --color-black stay as literal colors) */ --surface: rgb(30 30 30); --on-surface: rgb(229 231 235); --surface-alt: rgb(17 17 17); --on-surface-muted: rgb(200 200 210); --border-color: rgb(55 55 55); --border-subtle: rgb(40 40 40); /* Color scale overrides for Tailwind gray-* / primary / error utilities */ --color-primary: rgb(105 137 255); --color-gray-100: rgb(17 17 17); --color-gray-200: rgb(40 40 40); --color-gray-300: rgb(55 55 55); --color-gray-400: rgb(140 140 140); --color-gray-800: rgb(200 200 210); --color-gray-900: rgb(220 220 230); --color-error: rgb(248 113 113); --color-app-background: rgb(17 17 17); --color-app-card: rgb(30 30 30); }