/* =========================================================================== Nevira brand theme for Multica =========================================================================== Injected before by the stack's nginx, so it loads after the app's own stylesheets and wins on cascade order. The upstream web image is never rebuilt — `make update` keeps working. PALETTE SOURCE: nevira-fe/tailwind.config.ts (`--lw-*` custom properties). Taken from the codebase rather than sampled from a screenshot, so these are the same values the product ships. black #22242A brand #5B369E grey #676D7E brand-soft #D9C8F9 white #FFFFFF brand-softer #F8F6FF broken-white #FAFAFA brand-darker #422081 disable #EFEEEE brand-yellow #E8B723 border #D8DDDC brand-yellow-dark #755800 red #DD2222 green #17AB6F blue #256AE5 WHY THE FIRST ATTEMPT LOOKED HALF-BRANDED: upstream defines 59 theme tokens; only ~12 were overridden, so every surface, card, border, input and status colour stayed stock neutral grey while the buttons went purple. This file covers the full set. CONTRAST — measured, not assumed (AA = 4.5:1 text, 3:1 UI/large): #22242A on #FAFAFA .............. 14.86:1 #FFFFFF on #5B369E .............. 8.52:1 #5B369E on #F8F6FF .............. 7.95:1 #676D7E on #FAFAFA .............. 4.95:1 #FFFFFF on #DD2222 .............. 4.85:1 Two findings that shaped the mapping: 1. brand-yellow MUST carry dark text. White on #E8B723 is 1.87:1 — far below AA and effectively illegible. Dark #22242A on it is 8.29:1, so --warning pairs with a dark foreground. Yellow-dark #755800 is the variant that works with white (6.66:1) when a yellow *text* colour is needed. 2. --input and --ring cannot use border #D8DDDC. Against #FAFAFA it is 1.32:1, and WCAG 1.4.11 requires 3:1 for the boundary of an interactive control — an input you cannot see the edge of. Nothing in the #D8DDDC family reaches 3:1 (#9AA1A0 is still only 2.52:1), so inputs take grey #676D7E (4.95:1) and focus takes brand #5B369E (8.52:1). #D8DDDC stays for decorative dividers, where low contrast is correct. Values are oklch to match upstream's own token format. :root:root doubles specificity so this wins regardless of load order. ======================================================================== */ :root:root { /* --- app shell / canvas ------------------------------------------------ */ --app-shell: oklch(0.9772 0.0121 296.36); /* brand-softer #F8F6FF */ --page-canvas: oklch(0.9851 0.0000 89.88); /* broken-white #FAFAFA */ --background: oklch(0.9851 0.0000 89.88); --foreground: oklch(0.2608 0.0116 270.94); /* black #22242A */ /* --- surfaces ---------------------------------------------------------- */ --surface: oklch(1.0000 0.0000 89.88); /* white */ --surface-foreground: oklch(0.2608 0.0116 270.94); --surface-raised: oklch(1.0000 0.0000 89.88); --surface-hover: oklch(0.9441 0.0318 301.59); /* soft-purple #F0E8FF */ --surface-selected: oklch(0.9441 0.0318 301.59); --surface-selected-foreground: oklch(0.4359 0.1604 295.29); --surface-border: oklch(0.8934 0.0056 183.01); /* border #D8DDDC */ --card: oklch(1.0000 0.0000 89.88); --card-foreground: oklch(0.2608 0.0116 270.94); --popover: oklch(1.0000 0.0000 89.88); --popover-foreground: oklch(0.2608 0.0116 270.94); /* --- brand / actions --------------------------------------------------- */ --brand: oklch(0.4359 0.1604 295.29); /* brand #5B369E */ --brand-foreground: oklch(1.0000 0.0000 89.88); --primary: oklch(0.4359 0.1604 295.29); --primary-foreground: oklch(1.0000 0.0000 89.88); --secondary: oklch(0.9499 0.0011 17.18); /* disable #EFEEEE */ --secondary-foreground: oklch(0.2608 0.0116 270.94); --accent: oklch(0.9441 0.0318 301.59); /* soft-purple */ --accent-foreground: oklch(0.4359 0.1604 295.29); --muted: oklch(0.9499 0.0011 17.18); /* disable */ --muted-foreground: oklch(0.5357 0.0276 270.06); /* grey #676D7E, 4.95:1 */ --faint-foreground: oklch(0.6300 0.0250 270.06); /* --- status ------------------------------------------------------------ */ --destructive: oklch(0.5763 0.2186 27.63); /* red #DD2222 */ --success: oklch(0.6555 0.1462 158.88); /* green #17AB6F */ --warning: oklch(0.8017 0.1564 88.04); /* yellow — dark text only */ --info: oklch(0.5344 0.1969 264.05); /* blue #256AE5 */ /* --- controls ---------------------------------------------------------- */ --border: oklch(0.8934 0.0056 183.01); /* decorative dividers */ --input: oklch(0.5357 0.0276 270.06); /* grey — see finding 2 */ --ring: oklch(0.4359 0.1604 295.29); /* brand focus ring */ /* --- sidebar ----------------------------------------------------------- */ --sidebar: oklch(0.9772 0.0121 296.36); /* brand-softer */ --sidebar-foreground: oklch(0.2608 0.0116 270.94); --sidebar-primary: oklch(0.4359 0.1604 295.29); --sidebar-primary-foreground: oklch(1.0000 0.0000 89.88); --sidebar-accent: oklch(0.8626 0.0693 300.81); /* brand-soft #D9C8F9 */ --sidebar-accent-foreground: oklch(0.3529 0.1517 292.97); /* brand-darker */ --sidebar-border: oklch(0.8934 0.0056 183.01); --sidebar-ring: oklch(0.4359 0.1604 295.29); /* --- charts: brand first, then the product's own accents --------------- */ --chart-1: oklch(0.4359 0.1604 295.29); /* brand */ --chart-2: oklch(0.8017 0.1564 88.04); /* yellow */ --chart-3: oklch(0.6555 0.1462 158.88); /* green */ --chart-4: oklch(0.5344 0.1969 264.05); /* blue */ --chart-5: oklch(0.5763 0.2186 27.63); /* red */ /* --- scrollbars / find ------------------------------------------------- */ --scrollbar-thumb: oklch(0.8626 0.0693 300.81); --scrollbar-thumb-hover: oklch(0.4359 0.1604 295.29); --scrollbar-track: oklch(0.9772 0.0121 296.36); --find-match: oklch(0.8017 0.1564 88.04); --find-match-active: oklch(0.4359 0.1604 295.29); --find-match-foreground: oklch(0.2608 0.0116 270.94); } /* =========================================================================== Dark mode =========================================================================== The Nevira palette is authored for a light UI, so dark mode is derived rather than copied: near-black surfaces carry the brand hue (~302°) instead of neutral grey, and every foreground was re-measured against #1A1522. #B9A3E0 on #1A1522 .... 7.99:1 brand text / links #FFFFFF on #7553BD .... 5.65:1 primary button #E8B723 on #1A1522 .... 9.56:1 warning #F05A5A on #1A1522 .... 5.38:1 destructive (raw #DD2222 is too dark) #17AB6F on #1A1522 .... 6.04:1 success #A8AEBF on #1A1522 .... 8.07:1 muted text #5B369E itself is NOT reused for dark buttons: white text on it against a dark canvas reads as a dead control. It is lifted to #7553BD, the point where white text still clears AA. Lighter looks better in isolation but fails — #8968D4 is 4.20:1 and #9B7BE8 only 3.29:1. ======================================================================== */ .dark:is(.dark) { --app-shell: oklch(0.2081 0.0263 301.79); /* #1A1522 */ --page-canvas: oklch(0.2081 0.0263 301.79); --background: oklch(0.2081 0.0263 301.79); --foreground: oklch(0.9500 0.0100 300.00); --surface: oklch(0.2405 0.0294 302.57); /* #221C2B */ --surface-foreground: oklch(0.9500 0.0100 300.00); --surface-raised: oklch(0.2723 0.0341 302.01); /* #2A2335 */ --surface-hover: oklch(0.2723 0.0341 302.01); --surface-selected: oklch(0.3529 0.1517 292.97); /* brand-darker */ --surface-selected-foreground: oklch(0.9500 0.0100 300.00); --surface-border: oklch(0.3346 0.0378 301.84); /* #3A3247 */ --card: oklch(0.2405 0.0294 302.57); --card-foreground: oklch(0.9500 0.0100 300.00); --popover: oklch(0.2723 0.0341 302.01); --popover-foreground: oklch(0.9500 0.0100 300.00); --brand: oklch(0.7560 0.0891 300.82); /* #B9A3E0 text-safe */ --brand-foreground: oklch(0.2081 0.0263 301.79); --primary: oklch(0.5300 0.1600 295.29); /* #7553BD, white @5.65:1 */ --primary-foreground: oklch(1.0000 0.0000 89.88); --secondary: oklch(0.2723 0.0341 302.01); --secondary-foreground: oklch(0.9500 0.0100 300.00); --accent: oklch(0.3529 0.1517 292.97); /* brand-darker */ --accent-foreground: oklch(0.9500 0.0100 300.00); --muted: oklch(0.2723 0.0341 302.01); --muted-foreground: oklch(0.7515 0.0253 270.25); /* #A8AEBF, 8.07:1 */ --faint-foreground: oklch(0.6200 0.0250 270.25); --destructive: oklch(0.6652 0.1853 23.60); /* #F05A5A */ --success: oklch(0.6555 0.1462 158.88); --warning: oklch(0.8017 0.1564 88.04); --info: oklch(0.6800 0.1500 264.05); --border: oklch(0.3346 0.0378 301.84); --input: oklch(0.4600 0.0400 301.84); /* visible on dark */ --ring: oklch(0.7560 0.0891 300.82); --sidebar: oklch(0.2405 0.0294 302.57); --sidebar-foreground: oklch(0.9500 0.0100 300.00); --sidebar-primary: oklch(0.5300 0.1600 295.29); --sidebar-primary-foreground: oklch(1.0000 0.0000 89.88); --sidebar-accent: oklch(0.3529 0.1517 292.97); --sidebar-accent-foreground: oklch(0.9500 0.0100 300.00); --sidebar-border: oklch(0.3346 0.0378 301.84); --sidebar-ring: oklch(0.7560 0.0891 300.82); --chart-1: oklch(0.7560 0.0891 300.82); --chart-2: oklch(0.8017 0.1564 88.04); --chart-3: oklch(0.6555 0.1462 158.88); --chart-4: oklch(0.6800 0.1500 264.05); --chart-5: oklch(0.6652 0.1853 23.60); --scrollbar-thumb: oklch(0.3346 0.0378 301.84); --scrollbar-thumb-hover: oklch(0.5300 0.1600 295.29); --scrollbar-track: oklch(0.2081 0.0263 301.79); --find-match: oklch(0.8017 0.1564 88.04); --find-match-active: oklch(0.5300 0.1600 295.29); --find-match-foreground: oklch(0.2081 0.0263 301.79); }