/* powerchat-aqua.css: the PowerChat base palette (D16 addendum 2026-10-09, Story 1389). Aqua primary, magenta secondary, from the PowerChat logo (D160: aqua #81FEE9). Dark mode: Deep Sea, a teal-blue ground (hue 225). Replaces pentana-ai-base.css, which led with the Chainlit magenta. THE BASE: every environment runs this file, and every seasonal skin reverts to it. Deploy with scripts/skin.sh, which names the base in one place, layers a skin on top of it and puts it back. A skin layered on top overrides any token below and may set --pc-stripe / --pc-switch-on. Values are R G B triplets: LibreChat wraps them as rgb(var(--x) / alpha). */ /* Oxanium from Google Fonts. Must stay the first rule. */ @import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap"); :root { --brand-purple: 184 0 143; /* #B8008F = Magenta, the secondary: progress ring */ --accent-primary: 9 115 102; /* #097366 = Deep Aqua: the logo aqua darkened to 5.7:1 on white */ --accent-primary-hover: 4 96 85; /* #046055 = Deep Aqua, deeper */ --surface-submit: 9 115 102; /* #097366 = Deep Aqua: white label 5.7:1, both modes */ --surface-submit-hover: 4 96 85; /* #046055 = Deep Aqua, deeper */ --ring-primary: 9 115 102; /* #097366 = focus ring */ --link: 184 0 143; /* #B8008F = Magenta links: 6.1:1 on white */ --link-hover: 148 0 115; /* #940073 = Magenta, deeper */ --link-visited: 135 2 104; /* #870268 = Magenta, deeper still: v0.8.8 token, stock is purple; 9.4:1 on white */ --surface-active-alt: 184 236 226; /* #B8ECE2 = selected row: aqua tint, text 14.1:1 */ --surface-primary: 255 255 255; /* #FFFFFF = ground */ --presentation: 255 255 255; /* #FFFFFF = chat canvas */ --surface-primary-alt: 241 250 248; /* #F1FAF8 = Ice Aqua sidebar */ --surface-chat: 255 255 255; /* #FFFFFF = composer */ --surface-secondary: 241 250 248; /* #F1FAF8 = menus and dialogs */ --surface-tertiary: 230 245 242; /* #E6F5F2 = user bubble, chips */ --surface-dialog: 255 255 255; /* #FFFFFF = dialog panels */ --surface-hover: 220 238 234; /* #DCEEEA = hover */ --surface-active: 220 227 225; /* #DCE3E1 = selected tab / list item */ --text-primary: 22 19 28; /* #16131C = Logo Charcoal */ --text-secondary: 90 90 99; /* #5A5A63 = 6.4:1 on the sidebar */ --text-tertiary: 107 107 116; /* #6B6B74 = placeholders, timestamps: 4.7:1 on the bubble */ --border-light: 220 227 225; /* #DCE3E1 */ --border-medium: 199 208 206; /* #C7D0CE */ --border-heavy: 172 183 181; /* #ACB7B5 */ --surface-destructive: 196 46 0; /* #C42E00 = unchanged: white label 5.6:1 */ --surface-destructive-hover: 168 39 0; /* #A82700 = unchanged */ --text-destructive: 196 46 0; /* #C42E00 = unchanged */ --border-destructive: 196 46 0; /* #C42E00 = unchanged */ --surface-composer-hover: 220 238 234; /* #DCEEEA = open attach/tools button */ --switch-unchecked: 115 116 123; /* #73747B = switch off */ --surface-inverted: 22 19 28; /* #16131C = inverted pills: Logo Charcoal */ --surface-inverted-hover: 34 34 41; /* #222229 = inverted, hovered */ --text-inverted: 255 255 255; /* #FFFFFF = text on inverted surfaces */ --surface-secondary-alt: 220 238 234; /* #DCEEEA = shortcuts dialog, badges */ --surface-hover-alt: 205 228 223; /* #CDE4DF = secondary hover */ --surface-tertiary-alt: 255 255 255; /* #FFFFFF = tertiary alternate */ --border-xheavy: 107 107 116; /* #6B6B74 = steer menu, quote chips */ --border-medium-alt: 199 208 206; /* #C7D0CE = matches --border-medium */ --text-secondary-alt: 90 90 99; /* #5A5A63 = matches --text-secondary */ /* Shape and type dials: unchanged from pentana-ai-base.css */ --theme-font-family: 'Oxanium', ui-sans-serif, system-ui, sans-serif; --theme-control-radius: 0.5rem; --theme-surface-radius: 0.5rem; --theme-large-surface-radius: 0.75rem; /* Base-only extras, as custom properties so a seasonal skin layered on top can replace them */ --pc-stripe: linear-gradient(90deg, #33D2BC 0%, #33D2BC 55%, #B8008F 100%); --pc-switch-on: 9 115 102; /* #097366 = Deep Aqua */ } .dark { --brand-purple: 250 95 204; /* #FA5FCC = Magenta, the secondary: progress ring */ --accent-primary: 129 254 233; /* #81FEE9 = Logo Aqua, exact */ --accent-primary-hover: 201 255 244; /* #C9FFF4 = Logo Aqua, lighter */ --surface-submit: 9 115 102; /* #097366 = Deep Aqua: white label 5.7:1, both modes */ --surface-submit-hover: 4 96 85; /* #046055 = Deep Aqua, deeper */ --ring-primary: 129 254 233; /* #81FEE9 = focus ring */ --link: 250 95 204; /* #FA5FCC = Magenta links */ --link-hover: 255 148 218; /* #FF94DA = Magenta, lighter */ --link-visited: 216 115 182; /* #D873B6 = Magenta, muted: v0.8.8 token */ --surface-active-alt: 3 82 73; /* #035249 = selected row: aqua tint */ --surface-primary: 10 22 26; /* #0A161A = Deep Sea ground (hue 225), replaces the charcoal */ --presentation: 10 22 26; /* #0A161A = chat canvas */ --surface-primary-alt: 17 34 40; /* #112228 = Deep Sea sidebar */ --surface-chat: 21 44 52; /* #152C34 = composer */ --surface-secondary: 21 44 52; /* #152C34 = menus and dialogs */ --surface-tertiary: 21 44 52; /* #152C34 = user bubble, chips */ --surface-dialog: 21 44 52; /* #152C34 = dialog panels */ --surface-hover: 30 64 77; /* #1E404D = hover */ --surface-active: 30 64 77; /* #1E404D = selected tab / list item */ --text-primary: 235 241 244; /* #EBF1F4 */ --text-secondary: 179 196 204; /* #B3C4CC */ --text-tertiary: 158 178 186; /* #9EB2BA = placeholders, timestamps */ --border-light: 30 64 77; /* #1E404D */ --border-medium: 40 82 98; /* #285262 */ --border-heavy: 49 101 120; /* #316578 */ --surface-destructive: 196 46 0; /* #C42E00 = unchanged */ --surface-destructive-hover: 168 39 0; /* #A82700 = unchanged */ --text-destructive: 255 106 61; /* #FF6A3D = unchanged */ --border-destructive: 255 106 61; /* #FF6A3D = unchanged */ --surface-composer-hover: 30 64 77; /* #1E404D = open attach/tools button */ --switch-unchecked: 110 132 142; /* #6E848E = switch off */ --surface-inverted: 235 241 244; /* #EBF1F4 = inverted pills */ --surface-inverted-hover: 220 227 225; /* #DCE3E1 = inverted, hovered */ --text-inverted: 10 22 26; /* #0A161A = text on inverted surfaces */ --surface-secondary-alt: 19 39 46; /* #13272E = shortcuts dialog, badges */ --surface-hover-alt: 40 82 98; /* #285262 = secondary hover */ --surface-tertiary-alt: 30 64 77; /* #1E404D = tertiary alternate */ --border-xheavy: 158 178 186; /* #9EB2BA */ --border-medium-alt: 40 82 98; /* #285262 = matches --border-medium */ --text-secondary-alt: 179 196 204; /* #B3C4CC = matches --text-secondary */ /* Base-only extras */ --pc-stripe: linear-gradient(90deg, #81FEE9 0%, #81FEE9 55%, #FF00C8 100%); --pc-switch-on: 12 148 132; /* #0C9484 = lighter aqua: 4.1:1 on the dialog, white thumb 3.8:1 */ } /* rc3 hard-codes html { font-family: Inter } and reads the dial only in .font-theme-ui. */ html { font-family: var(--theme-font-family); } /* Top stripe: aqua into magenta, the order of the two roles (light uses a mid aqua so it shows on white). Drawn from --pc-stripe, so a skin's own body::before rule or --pc-stripe wins in both modes. */ body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 9999; pointer-events: none; background: var(--pc-stripe); } /* Send button: the primary. Deep Aqua with a white arrow in light; Logo Aqua with a Deep Sea arrow in dark (15.1:1). --text-inverted is white in light and the Deep Sea ground in dark. */ button[data-testid="send-button"] { background-color: rgb(var(--accent-primary)) !important; } button[data-testid="send-button"]:hover { background-color: rgb(var(--accent-primary-hover)) !important; } button[data-testid="send-button"] * { color: rgb(var(--text-inverted)) !important; } /* Switches that are on: --pc-switch-on, Deep Aqua in light and a lighter aqua in dark. Logo Aqua itself would leave the white thumb at 1.2:1. */ button[role="switch"][data-state="checked"] { background-color: rgb(var(--pc-switch-on)); } /* User message bubble, following the token in both modes. */ .user-turn { background-color: rgb(var(--surface-tertiary)); border-radius: 0.5rem; padding: 0.625rem 0.875rem; }