/* =========================================================================== theme.css — light/dark theming for singlekeyadvisory.com The site was built dark, with colours written directly into markup and inline CSS: ~4,600 hex literals and ~5,000 Tailwind colour classes. Rewriting every one of those into a variable was never going to be safe, so this file works the other way round: 1. It declares a set of semantic tokens (page, surface, text, line...). The dark values are exactly the colours the site already used, so nothing changes for a visitor who stays in dark mode. 2. Under :root[data-theme="light"] it re-points those tokens at a warm off-white palette AND redefines the specific Tailwind utility classes the site actually uses. `:root[data-theme="light"] .text-white` has higher specificity than `.text-white`, so the override wins without !important and without touching a single class in the markup. The brand orange #e58201 is unchanged in both themes, with one exception noted at --ska-accent-text. =========================================================================== */ :root { color-scheme: dark; /* surfaces, darkest to lightest */ --ska-bg: #0d1117; /* page */ --ska-bg-deep: #0a0c10; /* sections darker than the page */ --ska-bg-1: #11161d; /* subtle raise */ --ska-surface: #161b22; /* cards */ --ska-surface-2: #1e242c; /* nested cards, inputs */ /* text, strongest to faintest */ --ska-text: #ffffff; --ska-text-2: #d1d5db; /* gray-300 */ --ska-text-3: #c9d1d9; --ska-muted: #9ca3af; /* gray-400 -- 7.45:1, fine as it was */ /* gray-500 and gray-600 were 3.58:1 and 2.29:1 against the card colour: under the 4.5:1 the standard asks for body text. Lifted by the smallest amount that clears it, so they still read as secondary. */ --ska-muted-2: #838997; /* was #6b7280 */ --ska-muted-3: #7b899b; /* was #4b5563 */ /* hairlines and overlays */ --ska-line: rgba(255, 255, 255, 0.06); --ska-line-md: rgba(255, 255, 255, 0.10); --ska-line-str: rgba(255, 255, 255, 0.16); --ska-overlay: rgba(255, 255, 255, 0.05); --ska-overlay-2: rgba(255, 255, 255, 0.10); --ska-overlay-3: rgba(255, 255, 255, 0.20); --ska-scrim: rgba(0, 0, 0, 0.60); /* brand */ --ska-accent: #e58201; --ska-accent-2: #f5a623; --ska-accent-dk: #c77100; /* Accent used as TEXT on the page background. #e58201 on #0d1117 is 6.0:1 — fine. On the light background it is 2.6:1, which fails WCAG AA for body text, so light mode uses a deeper orange for text only. Buttons keep the true brand orange as their fill. */ --ska-accent-text: #e58201; /* Decorative glows were drawn to sit on near-black. They are kept but dialled back on light, where the same opacity reads as dirty smudges. */ --ska-glow-strong: 0.30; --ska-glow-mid: 0.15; --ska-glow-soft: 0.10; /* semantic */ --ska-success: #22c55e; --ska-danger: #ef4444; --ska-info: #60a5fa; --ska-violet: #a78bfa; } :root[data-theme="light"] { color-scheme: light; --ska-bg: #faf7f2; --ska-bg-deep: #f0eae0; --ska-bg-1: #f5f1ea; --ska-surface: #ffffff; --ska-surface-2: #f6f2eb; --ska-text: #16202b; --ska-text-2: #33404e; --ska-text-3: #3d4a58; --ska-muted: #55606d; --ska-muted-2: #5a6472; --ska-muted-3: #626c7a; --ska-line: rgba(22, 32, 43, 0.10); --ska-line-md: rgba(22, 32, 43, 0.15); --ska-line-str: rgba(22, 32, 43, 0.22); --ska-overlay: rgba(22, 32, 43, 0.045); --ska-overlay-2: rgba(22, 32, 43, 0.08); --ska-overlay-3: rgba(22, 32, 43, 0.14); --ska-scrim: rgba(22, 32, 43, 0.55); --ska-accent-text: #9a5a02; --ska-glow-strong: 0.14; --ska-glow-mid: 0.08; --ska-glow-soft: 0.05; --ska-success: #15803d; --ska-danger: #b91c1c; --ska-info: #1d4ed8; --ska-violet: #6d28d9; } /* The page itself. Set here rather than on a utility class so every page picks it up whether or not it declares its own background. */ html, body { background-color: var(--ska-bg); color: var(--ska-text); } /* Colour changes are animated so the toggle does not feel like a hard cut. Honoured only where the visitor has not asked for reduced motion. */ @media (prefers-reduced-motion: no-preference) { html.ska-theme-ready body, html.ska-theme-ready body * { transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease; } } /* --- generated: light values for the utility classes in use --- */ :root[data-theme="light"]:not([data-native-theme]) .text-gray-400 { color: var(--ska-muted); } :root[data-theme="light"]:not([data-native-theme]) .hover\:text-white:hover { color: var(--ska-text); } :root[data-theme="light"]:not([data-native-theme]) .text-white { color: var(--ska-text); } :root[data-theme="light"]:not([data-native-theme]) .hover\:bg-white\/5:hover { background-color: var(--ska-overlay); } :root[data-theme="light"]:not([data-native-theme]) .text-\[\#e58201\] { color: var(--ska-accent-text); } :root[data-theme="light"]:not([data-native-theme]) .text-gray-500 { color: var(--ska-muted-2); } :root[data-theme="light"]:not([data-native-theme]) .border-white\/10 { border-color: var(--ska-line-md); } :root[data-theme="light"]:not([data-native-theme]) .border-gray-800 { border-color: var(--ska-line); } :root[data-theme="light"]:not([data-native-theme]) .bg-white\/5 { background-color: var(--ska-overlay); } :root[data-theme="light"]:not([data-native-theme]) .hover\:text-\[\#e58201\]:hover { color: var(--ska-accent-text); } :root[data-theme="light"]:not([data-native-theme]) .text-gray-300 { color: var(--ska-text-2); } :root[data-theme="light"]:not([data-native-theme]) .bg-black\/40 { background-color: var(--ska-overlay-2); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-\[\#e58201\] { color: var(--ska-accent-text); } :root[data-theme="light"]:not([data-native-theme]) .text-gray-600 { color: var(--ska-muted-3); } :root[data-theme="light"]:not([data-native-theme]) .placeholder-gray-600 { color: var(--ska-muted-3); } :root[data-theme="light"]:not([data-native-theme]) .group:focus-within .group-focus-within\:text-\[\#e58201\] { color: var(--ska-accent-text); } :root[data-theme="light"]:not([data-native-theme]) .focus\:bg-black\/60:focus { background-color: var(--ska-overlay-3); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#161b22\] { background-color: var(--ska-surface); } :root[data-theme="light"]:not([data-native-theme]) .border-gray-800\/50 { border-color: var(--ska-line); } :root[data-theme="light"]:not([data-native-theme]) .text-gray-200 { color: var(--ska-text-2); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#0d1117\] { background-color: var(--ska-bg); } :root[data-theme="light"]:not([data-native-theme]) .hover\:text-blue-400:hover { color: var(--ska-info); } :root[data-theme="light"]:not([data-native-theme]) .ring-white\/5 { --tw-ring-color: var(--ska-line); } :root[data-theme="light"]:not([data-native-theme]) .border-gray-700 { border-color: var(--ska-line-md); } :root[data-theme="light"]:not([data-native-theme]) .hover\:bg-white\/10:hover { background-color: var(--ska-overlay-2); } :root[data-theme="light"]:not([data-native-theme]) .hover\:text-purple-400:hover { color: var(--ska-violet); } :root[data-theme="light"]:not([data-native-theme]) .hover\:bg-white\/\[0\.02\]:hover { background-color: var(--ska-overlay); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#161b22\]\/80 { background-color: var(--ska-surface); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#0d1117\]\/95 { background-color: var(--ska-bg); } :root[data-theme="light"]:not([data-native-theme]) .text-blue-400 { color: var(--ska-info); } :root[data-theme="light"]:not([data-native-theme]) .text-purple-400 { color: var(--ska-violet); } :root[data-theme="light"]:not([data-native-theme]) .bg-black\/20 { background-color: var(--ska-overlay); } :root[data-theme="light"]:not([data-native-theme]) .text-slate-400 { color: var(--ska-muted); } :root[data-theme="light"]:not([data-native-theme]) .border-white\/5 { border-color: var(--ska-line); } :root[data-theme="light"]:not([data-native-theme]) .hover\:bg-gray-800:hover { background-color: var(--ska-surface-2); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#0a0c10\] { background-color: var(--ska-bg-deep); } :root[data-theme="light"]:not([data-native-theme]) .to-\[\#0d1117\] { --tw-gradient-to: var(--ska-bg); } :root[data-theme="light"]:not([data-native-theme]) .text-red-500 { color: var(--ska-danger); } :root[data-theme="light"]:not([data-native-theme]) .bg-white { background-color: var(--ska-surface); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#050505\]\/90 { background-color: var(--ska-bg-deep); } :root[data-theme="light"]:not([data-native-theme]) .from-\[\#11161d\] { --tw-gradient-from: var(--ska-bg-1); } :root[data-theme="light"]:not([data-native-theme]) .text-green-500 { color: var(--ska-success); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-gray-300 { color: var(--ska-text-2); } :root[data-theme="light"]:not([data-native-theme]) .bg-gray-800 { background-color: var(--ska-surface-2); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-white { color: var(--ska-text); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#161b22\]\/60 { background-color: var(--ska-surface); } :root[data-theme="light"]:not([data-native-theme]) .hover\:bg-\[\#161b22\]:hover { background-color: var(--ska-surface); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#161b22\]\/40 { background-color: var(--ska-surface); } :root[data-theme="light"]:not([data-native-theme]) .bg-red-500\/10 { background-color: color-mix(in srgb, var(--ska-danger) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-blue-500 { background-color: color-mix(in srgb, var(--ska-info) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .text-emerald-500 { color: var(--ska-success); } :root[data-theme="light"]:not([data-native-theme]) .text-\[\#f6b25a\] { color: var(--ska-accent-text); } :root[data-theme="light"]:not([data-native-theme]) .via-white\/40 { --tw-gradient-stops: color-mix(in srgb, var(--ska-text) 40.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-blue-500\/10 { background-color: color-mix(in srgb, var(--ska-info) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .divide-gray-800 { border-color: var(--ska-line); } :root[data-theme="light"]:not([data-native-theme]) .border-gray-800\/80 { border-color: var(--ska-line); } :root[data-theme="light"]:not([data-native-theme]) .divide-gray-800\/50 { border-color: var(--ska-line); } :root[data-theme="light"]:not([data-native-theme]) .ring-blue-500\/20 { --tw-ring-color: color-mix(in srgb, var(--ska-info) 20.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-purple-500\/10 { background-color: color-mix(in srgb, var(--ska-violet) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .ring-purple-500\/20 { --tw-ring-color: color-mix(in srgb, var(--ska-violet) 20.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .text-white\/90 { color: color-mix(in srgb, var(--ska-text) 90.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-purple-500 { background-color: color-mix(in srgb, var(--ska-violet) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-black\/60 { background-color: var(--ska-overlay-3); } :root[data-theme="light"]:not([data-native-theme]) .bg-gray-600\/60 { background-color: var(--ska-muted-3); } :root[data-theme="light"]:not([data-native-theme]) .bg-gray-600 { background-color: var(--ska-muted-3); } :root[data-theme="light"]:not([data-native-theme]) .bg-gray-700 { background-color: var(--ska-surface-2); } :root[data-theme="light"]:not([data-native-theme]) .bg-white\/\[0\.02\] { background-color: var(--ska-overlay); } :root[data-theme="light"]:not([data-native-theme]) .border-slate-700\/70 { border-color: var(--ska-line-md); } :root[data-theme="light"]:not([data-native-theme]) .bg-slate-900\/70 { background-color: var(--ska-bg-1); } :root[data-theme="light"]:not([data-native-theme]) .bg-slate-800\/80 { background-color: var(--ska-surface-2); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-slate-950 { color: var(--ska-text); } :root[data-theme="light"]:not([data-native-theme]) .text-slate-50 { color: var(--ska-text); } :root[data-theme="light"]:not([data-native-theme]) .bg-gray-800\/50 { background-color: var(--ska-surface-2); } :root[data-theme="light"]:not([data-native-theme]) .via-gray-800 { --tw-gradient-stops: var(--ska-surface-2); } :root[data-theme="light"]:not([data-native-theme]) .bg-green-500\/10 { background-color: color-mix(in srgb, var(--ska-success) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .text-red-400 { color: var(--ska-danger); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-red-400 { color: var(--ska-danger); } :root[data-theme="light"]:not([data-native-theme]) .bg-emerald-500\/10 { background-color: color-mix(in srgb, var(--ska-success) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-red-500 { background-color: color-mix(in srgb, var(--ska-danger) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-gray-900\/50 { background-color: var(--ska-bg-1); } :root[data-theme="light"]:not([data-native-theme]) .from-white { --tw-gradient-from: var(--ska-text); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-gray-200 { color: var(--ska-text-2); } :root[data-theme="light"]:not([data-native-theme]) .border-red-500\/20 { border-color: color-mix(in srgb, var(--ska-danger) 20.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-gray-500 { background-color: var(--ska-muted-2); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-gray-400 { color: var(--ska-muted); } :root[data-theme="light"]:not([data-native-theme]) .hover\:bg-white\/\[0\.05\]:hover { background-color: var(--ska-overlay); } :root[data-theme="light"]:not([data-native-theme]) .hover\:border-white\/10:hover { border-color: var(--ska-line-md); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:bg-red-500 { background-color: color-mix(in srgb, var(--ska-danger) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:bg-emerald-500 { background-color: color-mix(in srgb, var(--ska-success) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .hover\:border-red-500\/50:hover { border-color: color-mix(in srgb, var(--ska-danger) 50.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-gray-800\/30 { background-color: var(--ska-surface-2); } :root[data-theme="light"]:not([data-native-theme]) .border-gray-800\/60 { border-color: var(--ska-line); } :root[data-theme="light"]:not([data-native-theme]) .text-gray-700 { color: var(--ska-muted-3); } :root[data-theme="light"]:not([data-native-theme]) .hover\:border-gray-500:hover { border-color: var(--ska-line-str); } :root[data-theme="light"]:not([data-native-theme]) .bg-red-500\/70 { background-color: color-mix(in srgb, var(--ska-danger) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .via-gray-700 { --tw-gradient-stops: var(--ska-surface-2); } :root[data-theme="light"]:not([data-native-theme]) .from-\[\#161b22\] { --tw-gradient-from: var(--ska-surface); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-red-500\/80 { color: color-mix(in srgb, var(--ska-danger) 80.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-gray-500 { color: var(--ska-muted-2); } :root[data-theme="light"]:not([data-native-theme]) .to-gray-500 { --tw-gradient-to: var(--ska-muted-2); } :root[data-theme="light"]:not([data-native-theme]) .bg-white\/\[0\.03\] { background-color: var(--ska-overlay); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:border-red-500\/50 { border-color: color-mix(in srgb, var(--ska-danger) 50.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .text-green-400 { color: var(--ska-success); } :root[data-theme="light"]:not([data-native-theme]) .border-gray-700\/50 { border-color: var(--ska-line-md); } :root[data-theme="light"]:not([data-native-theme]) .bg-slate-50 { background-color: var(--ska-bg); } :root[data-theme="light"]:not([data-native-theme]) .text-slate-900 { color: var(--ska-text); } :root[data-theme="light"]:not([data-native-theme]) .bg-green-500 { background-color: color-mix(in srgb, var(--ska-success) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-green-500 { color: var(--ska-success); } :root[data-theme="light"]:not([data-native-theme]) .to-gray-800 { --tw-gradient-to: var(--ska-surface-2); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#161b22\]\/30 { background-color: var(--ska-surface); } :root[data-theme="light"]:not([data-native-theme]) .border-red-900\/30 { border-color: color-mix(in srgb, var(--ska-danger) 30.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#1c2128\]\/50 { background-color: var(--ska-surface-2); } :root[data-theme="light"]:not([data-native-theme]) .text-orange-400 { color: var(--ska-accent-text); } :root[data-theme="light"]:not([data-native-theme]) .bg-red-900\/10 { background-color: color-mix(in srgb, var(--ska-danger) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .hover\:border-gray-600:hover { border-color: var(--ska-line-md); } :root[data-theme="light"]:not([data-native-theme]) .bg-emerald-500 { background-color: color-mix(in srgb, var(--ska-success) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-red-500 { color: var(--ska-danger); } :root[data-theme="light"]:not([data-native-theme]) .border-red-500 { border-color: var(--ska-danger); } :root[data-theme="light"]:not([data-native-theme]) .bg-green-900\/10 { background-color: color-mix(in srgb, var(--ska-success) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .border-green-500 { border-color: var(--ska-success); } :root[data-theme="light"]:not([data-native-theme]) .focus\:ring-gray-600:focus { --tw-ring-color: var(--ska-line-md); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#161b22\]\/50 { background-color: var(--ska-surface); } :root[data-theme="light"]:not([data-native-theme]) .border-white\/\[0\.05\] { border-color: var(--ska-line); } :root[data-theme="light"]:not([data-native-theme]) .border-red-900\/50 { border-color: color-mix(in srgb, var(--ska-danger) 50.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-white\/\[0\.01\] { background-color: var(--ska-overlay); } :root[data-theme="light"]:not([data-native-theme]) .hover\:bg-white\/\[0\.03\]:hover { background-color: var(--ska-overlay); } :root[data-theme="light"]:not([data-native-theme]) .ring-white\/10 { --tw-ring-color: var(--ska-line-md); } :root[data-theme="light"]:not([data-native-theme]) .from-gray-800 { --tw-gradient-from: var(--ska-surface-2); } :root[data-theme="light"]:not([data-native-theme]) .border-green-500\/20 { border-color: color-mix(in srgb, var(--ska-success) 20.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#1c2128\] { background-color: var(--ska-surface-2); } :root[data-theme="light"]:not([data-native-theme]) .border-emerald-500\/20 { border-color: color-mix(in srgb, var(--ska-success) 20.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .text-\[\#e58201\]\/40 { color: color-mix(in srgb, var(--ska-accent-text) 40.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .hover\:border-gray-700:hover { border-color: var(--ska-line-md); } :root[data-theme="light"]:not([data-native-theme]) .bg-red-500\/5 { background-color: color-mix(in srgb, var(--ska-danger) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .border-red-500\/10 { border-color: color-mix(in srgb, var(--ska-danger) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .text-emerald-400 { color: var(--ska-success); } :root[data-theme="light"]:not([data-native-theme]) .via-gray-200 { --tw-gradient-stops: var(--ska-text-2); } :root[data-theme="light"]:not([data-native-theme]) .bg-gray-800\/80 { background-color: var(--ska-surface-2); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:bg-green-500 { background-color: color-mix(in srgb, var(--ska-success) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .from-\[\#0d1117\] { --tw-gradient-from: var(--ska-bg); } :root[data-theme="light"]:not([data-native-theme]) .text-orange-500 { color: var(--ska-accent-text); } :root[data-theme="light"]:not([data-native-theme]) .bg-blue-900 { background-color: color-mix(in srgb, var(--ska-info) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .to-green-900\/10 { --tw-gradient-to: color-mix(in srgb, var(--ska-success) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .hover\:bg-white\/\[0\.04\]:hover { background-color: var(--ska-overlay); } :root[data-theme="light"]:not([data-native-theme]) .hover\:border-white\/\[0\.1\]:hover { border-color: var(--ska-line-md); } :root[data-theme="light"]:not([data-native-theme]) .from-red-500\/5 { --tw-gradient-from: color-mix(in srgb, var(--ska-danger) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .from-white\/5 { --tw-gradient-from: color-mix(in srgb, var(--ska-text) 5.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .border-emerald-500\/10 { border-color: color-mix(in srgb, var(--ska-success) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#0d1117\]\/50 { background-color: var(--ska-bg); } :root[data-theme="light"]:not([data-native-theme]) .to-gray-600 { --tw-gradient-to: var(--ska-muted-3); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#05090e\] { background-color: var(--ska-bg-deep); } :root[data-theme="light"]:not([data-native-theme]) .bg-blue-600\/10 { background-color: color-mix(in srgb, var(--ska-info) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#0a0a0a\] { background-color: var(--ska-bg-deep); } :root[data-theme="light"]:not([data-native-theme]) .hover\:bg-\[\#111\]:hover { background-color: var(--ska-surface-2); } :root[data-theme="light"]:not([data-native-theme]) .hover\:border-red-900\/50:hover { border-color: color-mix(in srgb, var(--ska-danger) 50.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .hover\:border-red-500\/30:hover { border-color: color-mix(in srgb, var(--ska-danger) 30.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-white\/\[0\.04\] { background-color: var(--ska-overlay); } :root[data-theme="light"]:not([data-native-theme]) .border-white\/15 { border-color: var(--ska-line-md); } :root[data-theme="light"]:not([data-native-theme]) .hover\:border-red-500\/40:hover { border-color: color-mix(in srgb, var(--ska-danger) 40.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .hover\:bg-red-500\/5:hover { background-color: color-mix(in srgb, var(--ska-danger) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:bg-red-500\/20 { background-color: color-mix(in srgb, var(--ska-danger) 16.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .text-amber-500 { color: var(--ska-accent-text); } :root[data-theme="light"]:not([data-native-theme]) .hover\:border-gray-700\/50:hover { border-color: var(--ska-line-md); } :root[data-theme="light"]:not([data-native-theme]) .text-red-900\/70 { color: color-mix(in srgb, var(--ska-danger) 70.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-red-500\/70 { color: color-mix(in srgb, var(--ska-danger) 70.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .to-slate-400 { --tw-gradient-to: var(--ska-muted); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#22c55e\] { background-color: color-mix(in srgb, var(--ska-success) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-violet-500 { background-color: color-mix(in srgb, var(--ska-violet) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .marker\:text-red-500::marker { color: var(--ska-danger); } :root[data-theme="light"]:not([data-native-theme]) .marker\:text-orange-500::marker { color: var(--ska-accent-text); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#0d1117\]\/80 { background-color: var(--ska-bg); } :root[data-theme="light"]:not([data-native-theme]) .from-red-500 { --tw-gradient-from: color-mix(in srgb, var(--ska-danger) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .to-gray-400 { --tw-gradient-to: var(--ska-muted); } :root[data-theme="light"]:not([data-native-theme]) .bg-white\/20 { background-color: var(--ska-overlay-3); } :root[data-theme="light"]:not([data-native-theme]) .via-white\/20 { --tw-gradient-stops: color-mix(in srgb, var(--ska-text) 20.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .from-gray-700 { --tw-gradient-from: var(--ska-surface-2); } :root[data-theme="light"]:not([data-native-theme]) .text-white\/\[0\.03\] { color: var(--ska-text); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-\[\#e58201\]\/10 { color: color-mix(in srgb, var(--ska-accent-text) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#0d1117\]\/90 { background-color: var(--ska-bg); } :root[data-theme="light"]:not([data-native-theme]) .hover\:bg-gray-800\/50:hover { background-color: var(--ska-surface-2); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:bg-red-500\/10 { background-color: color-mix(in srgb, var(--ska-danger) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .hover\:border-white\/20:hover { border-color: var(--ska-line-str); } :root[data-theme="light"]:not([data-native-theme]) .hover\:text-orange-500:hover { color: var(--ska-accent-text); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-orange-500 { color: var(--ska-accent-text); } :root[data-theme="light"]:not([data-native-theme]) .text-\[\#22c55e\] { color: var(--ska-success); } :root[data-theme="light"]:not([data-native-theme]) .shadow-\[\#22c55e\]\/30 { --tw-shadow-color: color-mix(in srgb, var(--ska-success) 16.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-\[\#22c55e\] { color: var(--ska-success); } :root[data-theme="light"]:not([data-native-theme]) .text-blue-500 { color: var(--ska-info); } :root[data-theme="light"]:not([data-native-theme]) .shadow-blue-500\/30 { --tw-shadow-color: color-mix(in srgb, var(--ska-info) 16.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-blue-500 { color: var(--ska-info); } :root[data-theme="light"]:not([data-native-theme]) .text-violet-500 { color: var(--ska-violet); } :root[data-theme="light"]:not([data-native-theme]) .shadow-violet-500\/30 { --tw-shadow-color: color-mix(in srgb, var(--ska-violet) 16.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-violet-500 { color: var(--ska-violet); } :root[data-theme="light"]:not([data-native-theme]) .border-\[\#0d1117\] { border-color: var(--ska-bg); } :root[data-theme="light"]:not([data-native-theme]) .text-\[\#0d1117\] { color: var(--ska-text); } :root[data-theme="light"]:not([data-native-theme]) .border-gray-200 { border-color: var(--ska-line); } :root[data-theme="light"]:not([data-native-theme]) .text-\[\#161b22\] { color: var(--ska-text); } :root[data-theme="light"]:not([data-native-theme]) .from-gray-500 { --tw-gradient-from: var(--ska-muted-2); } :root[data-theme="light"]:not([data-native-theme]) .to-gray-300 { --tw-gradient-to: var(--ska-text-2); } :root[data-theme="light"]:not([data-native-theme]) .text-red-400\/90 { color: color-mix(in srgb, var(--ska-danger) 90.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:border-red-500\/30 { border-color: color-mix(in srgb, var(--ska-danger) 30.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .text-orange-400\/90 { color: color-mix(in srgb, var(--ska-accent-text) 90.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .decoration-red-500\/30 { text-decoration-color: color-mix(in srgb, var(--ska-danger) 30.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .border-gray-600 { border-color: var(--ska-line-md); } :root[data-theme="light"]:not([data-native-theme]) .to-\[\#161b22\]\/80 { --tw-gradient-to: color-mix(in srgb, var(--ska-surface) 80.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-blue-500\/20 { background-color: color-mix(in srgb, var(--ska-info) 16.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .text-white\/5 { color: color-mix(in srgb, var(--ska-text) 5.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .hover\:text-gray-300:hover { color: var(--ska-text-2); } :root[data-theme="light"]:not([data-native-theme]) .hover\:text-\[\#ff9f2a\]:hover { color: var(--ska-accent-text); } :root[data-theme="light"]:not([data-native-theme]) .bg-white\/10 { background-color: var(--ska-overlay-2); } :root[data-theme="light"]:not([data-native-theme]) .border-red-500\/30 { border-color: color-mix(in srgb, var(--ska-danger) 30.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .via-gray-600 { --tw-gradient-stops: var(--ska-muted-3); } :root[data-theme="light"]:not([data-native-theme]) .to-gray-700 { --tw-gradient-to: var(--ska-surface-2); } :root[data-theme="light"]:not([data-native-theme]) .hover\:border-green-500\/30:hover { border-color: color-mix(in srgb, var(--ska-success) 30.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:from-green-500 { --tw-gradient-from: color-mix(in srgb, var(--ska-success) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:to-emerald-400 { --tw-gradient-to: color-mix(in srgb, var(--ska-success) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-green-400 { background-color: color-mix(in srgb, var(--ska-success) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-orange-400 { color: var(--ska-accent-text); } :root[data-theme="light"]:not([data-native-theme]) .border-green-500\/30 { border-color: color-mix(in srgb, var(--ska-success) 30.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-green-500\/5 { background-color: color-mix(in srgb, var(--ska-success) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-green-400 { color: var(--ska-success); } :root[data-theme="light"]:not([data-native-theme]) .bg-red-900 { background-color: color-mix(in srgb, var(--ska-danger) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .via-\[\#22c55e\] { --tw-gradient-stops: color-mix(in srgb, var(--ska-success) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-\[\#22c55e\]\/10 { background-color: color-mix(in srgb, var(--ska-success) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .border-\[\#22c55e\]\/50 { border-color: color-mix(in srgb, var(--ska-success) 50.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .hover\:bg-\[\#22c55e\]\/20:hover { background-color: color-mix(in srgb, var(--ska-success) 16.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .via-blue-500 { --tw-gradient-stops: color-mix(in srgb, var(--ska-info) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .border-blue-500\/50 { border-color: color-mix(in srgb, var(--ska-info) 50.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .hover\:bg-blue-500\/20:hover { background-color: color-mix(in srgb, var(--ska-info) 16.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .text-violet-500\/80 { color: color-mix(in srgb, var(--ska-violet) 80.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .via-violet-500 { --tw-gradient-stops: color-mix(in srgb, var(--ska-violet) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-violet-500\/10 { background-color: color-mix(in srgb, var(--ska-violet) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .border-violet-500\/50 { border-color: color-mix(in srgb, var(--ska-violet) 50.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .hover\:bg-violet-500\/20:hover { background-color: color-mix(in srgb, var(--ska-violet) 16.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-blue-900\/10 { background-color: color-mix(in srgb, var(--ska-info) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-\[\#e58201\]\/20 { color: color-mix(in srgb, var(--ska-accent-text) 20.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .hover\:border-green-500\/50:hover { border-color: color-mix(in srgb, var(--ska-success) 50.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .group:hover .group-hover\:text-\[\#e58201\]\/25 { color: color-mix(in srgb, var(--ska-accent-text) 25.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .via-white\/10 { --tw-gradient-stops: color-mix(in srgb, var(--ska-text) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .hover\:border-green-500\/60:hover { border-color: color-mix(in srgb, var(--ska-success) 60.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .focus\:ring-green-500\/60:focus { --tw-ring-color: color-mix(in srgb, var(--ska-success) 60.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .bg-green-500\/12 { background-color: color-mix(in srgb, var(--ska-success) 10.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .text-slate-500 { color: var(--ska-muted-2); } :root[data-theme="light"]:not([data-native-theme]) .text-black { color: var(--ska-text); } :root[data-theme="light"]:not([data-native-theme]) .to-green-500 { --tw-gradient-to: color-mix(in srgb, var(--ska-success) 22.0%, transparent); } :root[data-theme="light"]:not([data-native-theme]) .border-white\/20 { border-color: var(--ska-line-str); } :root[data-theme="light"]:not([data-native-theme]) .hover\:bg-\[\#0d1117\]:hover { background-color: var(--ska-bg); } :root[data-theme="light"]:not([data-native-theme]) .bg-black\/30 { background-color: var(--ska-overlay); } 248 rules generated 20 NOT MAPPED — review: 11 dark:bg-slate-900 11 dark:text-slate-100 2 hover:bg-[#c26e00] 2 to-red-800 2 to-[#d97706] 2 hover:from-[#d97706] 2 hover:to-[#b45309] 1 to-slate-500 1 bg-[#0b0f14] 1 border-gray-900 1 hover:bg-[#c97200] 1 hover:text-[#1877F2] 1 hover:border-[#1877F2] 1 hover:text-[#E4405F] 1 hover:border-[#E4405F] 1 hover:text-[#0A66C2] 1 hover:border-[#0A66C2] 1 hover:text-[#FF0000] 1 hover:border-[#FF0000] 1 bg-[#0f1115] /* --- hand-written: things a class-level swap cannot express --- */ /* Glass cards were a translucent dark pane over a dark page. On light, the same rule shows as a grey smear, so the surface is made opaque and given a real hairline instead of relying on a white 10% border. */ :root[data-theme="light"] .glass-card { background: var(--ska-surface); border-color: var(--ska-line); box-shadow: 0 1px 2px rgba(22, 32, 43, 0.04), 0 8px 24px rgba(22, 32, 43, 0.06); } /* The CTA button keeps the true brand orange in both themes -- it is the one place the accent is a fill rather than ink, and it has to stay recognisable. */ :root[data-theme="light"] .cta-button { color: #ffffff; } /* Decorative blurred blobs and the hero's grid/noise overlays. An earlier version of this file dimmed every blurred blob to 8% and inverted the grid, on the theory that dark-mode decoration would smear on a pale page. It did the opposite: the hero lost its grid and its colour wash entirely and went flat white. Two things were wrong. The grid is drawn in #80808012 -- mid grey at 7% alpha, which is already neutral and reads correctly on either background. Inverting it turned a visible grey into an invisible near-white. It is left alone now. The blobs are the page's only colour. They need MORE presence on a light background, not less, because a 10% orange wash that reads clearly against near-black barely registers against cream. They keep their own opacity and Nothing is overridden here at all. Setting `filter` on these elements would replace the blur(120px) Tailwind puts there and flatten the blobs into hard discs, and dimming them is what made the hero go blank in the first place. */ /* Inputs: the dark theme relied on a near-black fill with a white-ish border. */ :root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select { background-color: var(--ska-surface); border-color: var(--ska-line-md); color: var(--ska-text); } :root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder { color: var(--ska-muted-3); } /* The splash is a white panel with dark text in both themes, so in dark mode it is already correct. In light mode it is the same colour as the page behind it, which makes the fade look like nothing happens -- give it the page tone and let the logo carry it. */ :root[data-theme="light"] .logo-splash { background-color: var(--ska-bg); } /* The toggle itself. */ .ska-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--ska-line-md); background: var(--ska-overlay); color: var(--ska-muted); cursor: pointer; flex-shrink: 0; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .ska-theme-toggle:hover { color: var(--ska-accent); border-color: var(--ska-accent); } .ska-theme-toggle:focus-visible { outline: 2px solid var(--ska-accent); outline-offset: 2px; } .ska-theme-toggle svg { width: 18px; height: 18px; } /* Show the icon for the theme you would switch TO, which is the convention people expect: a sun while you are in the dark. */ .ska-theme-toggle .ska-icon-sun { display: block; } .ska-theme-toggle .ska-icon-moon { display: none; } :root[data-theme="light"] .ska-theme-toggle .ska-icon-sun { display: none; } :root[data-theme="light"] .ska-theme-toggle .ska-icon-moon { display: block; } /* Modal and drawer backdrops. These are full-bleed dark sheets, and the generic surface mapping turned them into an opaque cream panel that hid the page instead of dimming it. A backdrop has to stay a scrim in both themes -- it is the thing that tells you the content behind is inactive. Matched on the full-bleed + blur combination rather than by colour, since that is what actually makes one a backdrop. */ :root[data-theme="light"] .fixed.inset-0[class*="backdrop-blur"], :root[data-theme="light"] .fixed.inset-0.bg-black\/60, :root[data-theme="light"] .fixed.inset-0.bg-black\/40 { background-color: var(--ska-scrim); } /* The country-code dropdown is built by js/forms.js and positioned over everything; give its scrollbar and hover state the light treatment too. */ :root[data-theme="light"] .ska-cc-item:hover { background: var(--ska-overlay-2); } /* --- the blog articles' own palette --------------------------------------- The 15 articles were built before this theme layer and declare their own variables in a :root block: --bg, --t1, --line and so on. Rather than edit fifteen stylesheets, those names are re-pointed here for light mode. :root[data-theme="light"] outranks the articles' plain :root, so this wins wherever it applies and leaves dark mode exactly as it was. --------------------------------------------------------------------------- */ :root { /* The articles use --amber for three different jobs. As a fill or a border it is the brand orange in both themes; as ink on the page it has to darken in light mode to stay readable, so that use gets its own name. */ --amber-ink: #e58201; } :root[data-theme="light"] { --amber-ink: var(--ska-accent-text); --bg: var(--ska-bg); --bg-1: var(--ska-bg-1); --bg-2: var(--ska-surface); --line: var(--ska-line); --line-md: var(--ska-line-md); --t1: var(--ska-text); --t2: var(--ska-muted); --t3: var(--ska-muted-3); } /* --- the compliance tools' own palette ------------------------------------ compliance.php and mcompliance.php predate this layer and declare their own variables. Same treatment as the blog articles: re-point the names for light mode rather than rewriting two large stylesheets. --------------------------------------------------------------------------- */ :root { /* --primary is the amber used for both fills and labels; as ink on a pale page it needs the deeper tone, so the ink use gets its own name. */ --primary-ink: #f59e0b; } :root[data-theme="light"] { --primary-ink: var(--ska-accent-text); --surface: var(--ska-surface); --surface-hover: var(--ska-surface-2); --surface-border: var(--ska-line-md); --text-main: var(--ska-text); --text-muted: var(--ska-muted); --text-subtle: var(--ska-muted-2); --void: var(--ska-bg); --card: var(--ska-surface); } /* =========================================================================== Dark mode: raise the text that is too faint to read. Measured across 26 pages with gradient-backed text excluded, five colours accounted for almost every failure against WCAG AA: gray-500 #6b7280 3.58:1 ~1280 instances body copy, labels, footer links gray-600 #4b5563 2.29:1 41 instances step numbers, fine print slate-500 #64748b 3.55:1 62 instances lead paragraphs --t3 #2d3748 1.49:1 27 instances the articles' faintest text white on the brand orange 2.79:1 94 instances every primary CTA The greys are lifted the smallest amount that clears 4.5:1 against both the page and the card colour -- they still read as muted, just legible. The CTA keeps #e58201 exactly and takes dark ink instead, which is 6.78:1; darkening the orange enough for white text would have turned the brand colour muddy. Scoped :not([data-theme="light"]) so it covers the default too, in case the theme script has not run. =========================================================================== */ :root:not([data-theme="light"]) .text-gray-500, :root:not([data-theme="light"]) .text-slate-500 { color: #838997; } :root:not([data-theme="light"]) .text-gray-600 { color: #7b899b; } /* The blog articles' own muted tokens, lifted to the same standard. --t2 is their body-secondary colour and --t3 their faintest; at #64748b and #2d3748 they were 3.55:1 and 1.49:1. */ :root:not([data-theme="light"]) { --t2: #79899f; --t3: #7c8a9e; } /* Ink on the brand orange, in both themes. The fill stays #e58201. [class~="..."] matches a whole space-separated class token. The first attempt used [class*="..."], a substring match, which also caught `hover:bg-[#e58201]/20` -- so every social icon that merely tints orange ON HOVER had its resting colour turned to near-black and disappeared. */ .cta-button, .cta-button span, .cta-button svg, button[class~="bg-[#e58201]"], a[class~="bg-[#e58201]"], button[class~="bg-[#e58201]"] span, a[class~="bg-[#e58201]"] span, button[class~="bg-[#e58201]"] svg, a[class~="bg-[#e58201]"] svg { color: #0d1117; } /* text-white/90 on the header CTA resolves to a translucent white the rule above cannot reach through the opacity, so it is named explicitly. */ button[class~="bg-[#e58201]"] .text-white\/90, a[class~="bg-[#e58201]"] .text-white\/90 { color: rgba(13, 17, 23, 0.86); } /* Buttons filled with a third party's brand colour keep white ink in both themes -- WhatsApp green and YouTube red are fixed, so the theme's ink token is the wrong thing to contrast against. */ :root[data-theme="light"]:not([data-native-theme]) [class~="bg-[#25D366]"], :root[data-theme="light"]:not([data-native-theme]) [class~="bg-[#25D366]/90"], :root[data-theme="light"]:not([data-native-theme]) [class~="bg-[#25D366]"] svg, :root[data-theme="light"]:not([data-native-theme]) [class~="bg-[#25D366]/90"] svg, :root[data-theme="light"]:not([data-native-theme]) a[href^="https://wa.me"], :root[data-theme="light"]:not([data-native-theme]) a[href^="https://wa.me"] svg { /* The WhatsApp mark is white-on-green everywhere it appears; it is a logo, not body text, so brand recognition wins over the ink token here. */ color: #fff; } /* --- last few status chips ------------------------------------------------ These carry their own literal colours in page CSS rather than utility classes, so neither the generated block nor the token converter reached them. Both themes get the token, which is tuned per theme already. --------------------------------------------------------------------------- */ :root[data-theme="light"]:not([data-native-theme]) .pis-problem { color: var(--ska-danger); } :root[data-theme="light"]:not([data-native-theme]) .pis-solution { color: var(--ska-success); } /* Dark mode: a 900-weight red at 70% opacity came out at 1.49:1, and the red-500 chip on its own 10% wash at 4.2:1. Both lifted to the danger token, which is 5.03:1 on the page. */ :root:not([data-theme="light"]) .text-red-900\/70 { color: #f0a3a3; } :root:not([data-theme="light"]) .group:hover .group-hover\:text-red-500\/70 { color: #f87171; } :root:not([data-theme="light"]) .text-red-500 { color: #f87171; } :root[data-theme="light"]:not([data-native-theme]) .rc-bc-badge, :root[data-theme="light"]:not([data-native-theme]) .rc-bc-time { color: #fff; background: rgba(13, 17, 23, 0.72); } /* A white-filled button on a dark page is a high-contrast secondary action. Mapping bg-white to the surface token made it white-on-cream in light mode -- an invisible button. Buttons and links get the inverse treatment instead: dark fill, light label, same intent. Plain
panels are untouched, because there the token is right. */ :root[data-theme="light"]:not([data-native-theme]) a[class~="bg-white"], :root[data-theme="light"]:not([data-native-theme]) button[class~="bg-white"] { background-color: var(--ska-text); color: var(--ska-bg); } :root[data-theme="light"]:not([data-native-theme]) a[class~="bg-white"] span, :root[data-theme="light"]:not([data-native-theme]) button[class~="bg-white"] span, :root[data-theme="light"]:not([data-native-theme]) a[class~="bg-white"] svg, :root[data-theme="light"]:not([data-native-theme]) button[class~="bg-white"] svg { color: var(--ska-bg); } /* Its glow shadow is white-on-white too; give it a normal drop shadow. */ :root[data-theme="light"]:not([data-native-theme]) button[class~="bg-white"] { box-shadow: 0 8px 24px rgba(22, 32, 43, 0.16); }