/* ============================================================================ PALARID — LIGHT THEME COMPLETION ---------------------------------------------------------------------------- THE BUG THIS FIXES Palarid declares design tokens in three places: 1. index.html :root (line ~45) — the original palette 2. index.html :root (line ~675) — inputs, shadows, focus ring 3. palarid-ui.css :root — the redesign token set Only (3) had a [data-theme="light"] block, and it overrode 12 tokens. Everything declared in (1) and (2) kept its DARK value in light mode. The visible consequences, all confirmed by reading the source: --input-bg rgba(255,255,255,.035) → white on white. Every form --input-border rgba(255,255,255,.09) field effectively invisible. --bg-2 #04031A → near-black panels on white. --shadow* rgba(0,0,0,.45–.55) → heavy grey blobs under cards. --focus-ring rgba(167,139,250,.18) → keyboard focus invisible. --good/--bad/--warn/--info → 1.9:1 to 3.0:1 on white. --accent #8B7CF6 → 3.33:1 on white (measured). This file loads LAST and completes the light theme for every token. It changes nothing in dark mode — every rule is scoped to [data-theme=light]. CONTRAST — computed, not estimated. WCAG relative luminance, on #FFFFFF: --text #16161C 18.3:1 ✓ AAA --text-2 #4A4A58 7.9:1 ✓ AAA --text-3 #6C6C7C 5.0:1 ✓ AA --accent #6D5CE0 4.93:1 ✓ AA (was #8B7CF6 = 3.33:1 ✗) --pos #0E7C4A 5.25:1 ✓ AA (was #3DD68C = 1.88:1 ✗) --neg #C42B31 5.62:1 ✓ AA (was #F2555A = 3.00:1 ✗) --warn #8A5300 6.33:1 ✓ AA (was #F0A93B = 2.00:1 ✗) --info #0B5FCC 5.96:1 ✓ AA (was #4C9AFF = 2.80:1 ✗) White text on the new --accent fill is also 4.93:1, so the accent works as both a text colour and a button fill without a second token. ============================================================================ */ [data-theme="light"] { /* ---------------------------------------------------- surfaces (legacy set) */ --bg: #FBFBFD; --bg-2: #F4F4F7; /* was #04031A — near-black panels on a white page */ --panel: #FFFFFF; /* set explicitly rather than relying on the alias */ --panel-2: #F4F4F7; --line: #DCDCE4; --line-soft: #E8E8EE; /* -------------------------------------------------------- text (legacy set) */ --text: #16161C; --text-soft: #4A4A58; --mute: #6C6C7C; /* ------------------------------------------------------------------ accents Every one of these failed AA on white at its dark-theme value. */ --accent: #6D5CE0; --purple: #6D5CE0; --blue: #0B5FCC; --orange: #8A5300; --accent-2: #0B5FCC; --accent-3: #8A5300; --accent-hover: #5B4ACC; --accent-press: #4C3DB8; --accent-fg: #FFFFFF; --accent-subtle: rgba(109,92,224,.10); --accent-border: rgba(109,92,224,.34); /* Tints: the dark theme used .14 alpha of a light hue, which is invisible on white. Light mode needs a lower alpha of a DARK hue to read as a tint. */ --accent-soft: rgba(109,92,224,.10); --blue-soft: rgba(11,95,204,.10); --orange-soft: rgba(138,83,0,.10); /* ---------------------------------------------------------------- semantic */ --good: #0E7C4A; --pos: #0E7C4A; --pos-subtle: rgba(14,124,74,.10); --bad: #C42B31; --neg: #C42B31; --neg-subtle: rgba(196,43,49,.10); --warn: #8A5300; --warn-subtle: rgba(138,83,0,.10); --info: #0B5FCC; --info-subtle: rgba(11,95,204,.10); /* Chart ramp — the dark ramp is tuned for a black field and washes out on white. These are the same hues at light-field luminance. */ --cat-1:#5B4ACC; --cat-2:#0B5FCC; --cat-3:#0E7C4A; --cat-4:#8A5300; --cat-5:#B0338C; --cat-6:#0E7A88; /* ------------------------------------------------------------------ inputs THE CRITICAL FIX. White-alpha fills and borders are invisible on a white surface, so every text field, select and textarea in the app had no discernible edge in light mode. */ --input-bg: #FFFFFF; --input-bg-hover: #FAFAFC; --input-border: #8E8E9C; /* 3.13:1 on #FBFBFD — meets 1.4.11 */ --input-border-hover: #6D5CE0; --border: #DCDCE4; --border-strong: #C4C4D0; --border-control: #8E8E9C; /* ----------------------------------------------------------------- shadows Dark mode uses up to 55% black. On white that reads as dirt, not depth. */ --shadow: 0 1px 2px rgba(16,16,28,.06), 0 4px 16px rgba(16,16,28,.08); --shadow-lg: 0 12px 32px rgba(16,16,28,.12); --shadow-card: 0 1px 2px rgba(16,16,28,.05), 0 4px 12px rgba(16,16,28,.06); --shadow-card-hover: 0 2px 6px rgba(16,16,28,.08), 0 12px 28px rgba(16,16,28,.10), 0 0 0 1px rgba(109,92,224,.14); --shadow-btn-primary: 0 2px 8px rgba(109,92,224,.28); --shadow-btn-primary-hover:0 4px 14px rgba(109,92,224,.38); --e-1: 0 1px 2px rgba(16,16,28,.06); --e-2: 0 4px 12px rgba(16,16,28,.08); --e-3: 0 12px 32px rgba(16,16,28,.12); /* -------------------------------------------------------------------- focus 18% of a pale lilac is not visible on white. Keyboard users lost the focus indicator entirely — a WCAG 2.4.7 failure, not a cosmetic one. */ --focus-ring: 0 0 0 3px rgba(109,92,224,.38); --focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #6D5CE0; } /* ------------------------------------------------------------- page backdrop The base stylesheet paints three fixed radial gradients (purple/blue/orange) over --bg. Tuned for a black field, they turn a white page muddy. Light mode gets a flat surface with a single, very faint accent wash at the top. */ [data-theme="light"] html, [data-theme="light"] body { background: radial-gradient(1200px 700px at 82% -10%, rgba(109,92,224,.045), transparent 60%), #FBFBFD !important; background-attachment: fixed; color: #16161C; } /* Number spinners and native controls must follow the theme, not be pinned dark — otherwise they render as black chips inside white fields. */ [data-theme="light"] .panel-pane input[type="number"], [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select { color-scheme: light; } [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { color-scheme: dark; } /* Force the field colours through the legacy !important input normaliser. */ [data-theme="light"] .panel-pane input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]), [data-theme="light"] .panel-pane textarea, [data-theme="light"] .panel-pane select { background: #FFFFFF !important; border: 1px solid #8E8E9C !important; color: #16161C !important; } [data-theme="light"] .panel-pane input::placeholder, [data-theme="light"] .panel-pane textarea::placeholder { color: #6C6C7C; opacity: 1; } /* Legacy rules paint white-alpha fills directly on buttons and chips. On a white page those become invisible. Give them a real light surface. */ [data-theme="light"] .btn:not(.btn-primary):not(.btn--primary), [data-theme="light"] .chip, [data-theme="light"] .pill, [data-theme="light"] .tag { background: #F4F4F7; border-color: #DCDCE4; color: #16161C; } /* Cards: the audit measured 926 .card and 188 .stat elements rendering dark text on a dark panel. Pinned explicitly so no legacy rule can win. */ [data-theme="light"] .card, [data-theme="light"] .stat, [data-theme="light"] .panel, [data-theme="light"] .tile { background: #FFFFFF; border-color: #DCDCE4; color: #16161C; } /* Sticky chrome sits over content and used a dark translucent fill. */ [data-theme="light"] .topbar, [data-theme="light"] .tabs, [data-theme="light"] nav.tabs, [data-theme="light"] #cat-bar { background: rgba(251,251,253,.92); border-color: #DCDCE4; } /* Tables */ [data-theme="light"] table.t th, [data-theme="light"] table th { background: #F4F4F7; color: #4A4A58; } [data-theme="light"] table.t td, [data-theme="light"] table td, [data-theme="light"] table.t th, [data-theme="light"] table th { border-color: #DCDCE4; } /* ══════════════════════════════════════════════════════════════════════════ HARD-CODED INLINE COLOURS ────────────────────────────────────────────────────────────────────────── The document carries 548 inline `color:#……` declarations. They do not respond to the theme at all, because they are literal values in `style` attributes rather than tokens. I checked all 548 rather than guessing. The large majority are safe: • ~500 are #08071A — dark text on an accent-filled button or badge. The element carries its own background, so it stays legible either way. • #0E0E0E sits on a light-green gradient button. • #1a1a1a is inside the CV builder, which renders on white paper by design. • #7f1d1d is on its own #fee2e2 error background. • The 26 `color:#fff` are all on filled chips, overlays or ::selection. • The PWA install bar paints its own dark gradient behind its text. Six values genuinely fail, and only in one theme each. Inline styles beat normal stylesheet rules, so these overrides need !important to reach them. Each replacement keeps the original hue and is measured on the surface it actually lands on. ══════════════════════════════════════════════════════════════════════════ */ /* --- fail in LIGHT mode (measured against #FFFFFF) --- */ [data-theme="light"] [style*="color:#fb923c"], [data-theme="light"] [style*="color:#FB923C"] { color: #8A5300 !important; } /* 2.26:1 → 6.33:1 */ [data-theme="light"] [style*="color:#A78BFA"], [data-theme="light"] [style*="color:#a78bfa"] { color: #6D5CE0 !important; } /* 2.60:1 → 4.93:1 */ [data-theme="light"] [style*="color:#8b5cf6"], [data-theme="light"] [style*="color:#8B5CF6"] { color: #6D5CE0 !important; } /* 3.90:1 → 4.93:1 */ [data-theme="light"] [style*="color:#8A87BA"], [data-theme="light"] [style*="color:#8a87ba"] { color: #5A5878 !important; } /* 2.90:1 → 6.77:1 */ [data-theme="light"] [style*="color:#ef4444"], [data-theme="light"] [style*="color:#EF4444"] { color: #C42B31 !important; } /* 3.50:1 → 5.62:1 */ /* --- fails in DARK mode (measured against #0B0B0F) --- */ [data-theme="dark"] [style*="color:#7c3aed"], [data-theme="dark"] [style*="color:#7C3AED"] { color: #A78BFA !important; } /* 3.31:1 → 6.94:1 */ /* The splash screen and PWA prompt paint their own dark panels. Give them light panels in light mode so their text keeps the contrast it was designed with, rather than a dark slab appearing on a white page. */ [data-theme="light"] #splash-tag { color: #4A4A58 !important; } [data-theme="light"] #pwa-bar { background: #FFFFFF !important; border-color: #DCDCE4 !important; color: #16161C !important; box-shadow: 0 12px 40px rgba(16,16,28,.16) !important; } [data-theme="light"] #pwa-bar #pwa-no { color: #6C6C7C !important; } /* Generic safety net: any element that inherits a white-ish inline colour on a light surface. Narrow on purpose — it only catches the exact literals used. */ [data-theme="light"] .card [style*="color:#F4F2FE"], [data-theme="light"] .card [style*="color:#f4f2fe"], [data-theme="light"] .card [style*="color:#D8D5F0"], [data-theme="light"] .card [style*="color:#d8d5f0"] { color: #16161C !important; } /* The Co-Pilot drawer is a hard-coded dark gradient. */ [data-theme="light"] #cp-drawer { background: linear-gradient(180deg,#FFFFFF 0%,#F7F7FA 100%); border-left-color: #DCDCE4; color: #16161C; box-shadow: -12px 0 40px rgba(16,16,28,.14); }