/* Config colors: use valid CSS color values (Tailwind v4 compatible) */ :root { /* Bridge runtime vars to shared naming convention */ color: var(--on-surface, rgb(51 51 51)); --color-white: rgb(255 255 255); --color-black: var(--accent-font-color, rgb(51 51 51)); --color-primary: var(--accent-color, 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: var(--placeholder-font-color, rgb(161 168 179)); --color-gray-800: var(--subtitle-color, rgb(37 44 67)); --color-gray-900: rgb(33 37 41); --color-error: rgb(224 16 16); --color-app-background: var(--main-bg-color, var(--color-gray-100)); --color-app-card: var(--main-bg-color-components, var(--color-white)); --primary-font-family: var(--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: var(--main-bg-color-components-dark, rgb(30 30 30)); --on-surface: var(--accent-font-color-dark, rgb(229 231 235)); --surface-alt: var(--main-bg-color-dark, rgb(17 17 17)); --on-surface-muted: var(--subtitle-color-dark, 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: var(--accent-color-dark, 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: var(--placeholder-font-color-dark, rgb(140 140 140)); --color-gray-800: var(--subtitle-color-dark, rgb(200 200 210)); --color-gray-900: rgb(220 220 230); --color-error: rgb(248 113 113); --color-app-background: var(--main-bg-color-dark, rgb(17 17 17)); --color-app-card: var(--main-bg-color-components-dark, rgb(30 30 30)); }