/* * ============================================================ * Launchii — Theme System (CSS Custom Properties) * ============================================================ * * Approach: Override Tailwind's built-in color VALUES via CSS vars. * All 1,562 existing class names stay unchanged. * * Dark mode = current production look (pixel-perfect preserved). * Light mode = inverted palette for white backgrounds. * * Resolution: user pref → admin default → OS pref → dark * Set via: * * Variable naming: --tw-{color} provides space-separated RGB * for use with Tailwind's alpha modifier syntax: * rgb(var(--tw-white) / ) * * ============================================================ */ /* ── DARK THEME (default — matches current production exactly) ── */ :root, [data-theme="dark"] { /* Core page backgrounds */ --tw-dark-950: 8 8 18; /* #080812 — page bg */ --tw-dark-900: 15 15 26; /* #0f0f1a — secondary bg */ --tw-dark-800: 26 26 46; /* #1a1a2e — tertiary bg */ /* Foreground / text (white = primary text in dark mode) */ --tw-white: 255 255 255; /* #ffffff */ /* Gray scale for muted/secondary text */ --tw-gray-300: 209 213 219; /* #d1d5db — light secondary */ --tw-gray-400: 156 163 175; /* #9ca3af — muted */ --tw-gray-500: 107 114 128; /* #6b7280 — dim */ --tw-gray-600: 75 85 99; /* #4b5563 — faint */ /* Brand gold */ --lii-gold-400: #D4AF37; --lii-gold-500: #C5A028; --lii-gold-600: #B8960F; color-scheme: dark; } /* ── LIGHT THEME ────────────────────────────────────────────── */ [data-theme="light"] { /* Backgrounds: dark slots → light fills */ --tw-dark-950: 248 249 251; /* #f8f9fb — page bg */ --tw-dark-900: 243 244 246; /* #f3f4f6 — secondary bg */ --tw-dark-800: 229 231 235; /* #e5e7eb — tertiary bg */ /* Foreground: white → near-black (primary text) */ --tw-white: 17 24 39; /* #111827 — gray-900 */ /* Gray scale INVERTED to maintain visual hierarchy */ --tw-gray-300: 55 65 81; /* #374151 — was gray-700 */ --tw-gray-400: 75 85 99; /* #4b5563 — was gray-600 */ --tw-gray-500: 107 114 128; /* #6b7280 — stays same (midpoint) */ --tw-gray-600: 156 163 175; /* #9ca3af — was gray-400 */ /* Brand gold (slightly darker for light bg contrast) */ --lii-gold-400: #B8960F; --lii-gold-500: #A68B10; --lii-gold-600: #8B7400; color-scheme: light; } /* ── OVERRIDES FOR ELEMENTS CSS VARS CAN'T REACH ────────────── */ /* gradient-text: gold gradient for headings */ [data-theme="light"] .gradient-text { background: linear-gradient(135deg, #8B7400 0%, #B8960F 50%, #8B7400 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* hero-glow: radial gold glow behind hero section */ [data-theme="light"] .hero-glow { background: radial-gradient(ellipse at 50% 0%, rgba(184, 150, 15, 0.06) 0%, transparent 60%); } /* Card hover shadows */ [data-theme="light"] .card-hover:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.08); } /* stat-glow box shadow */ [data-theme="light"] .stat-glow { box-shadow: inset 0 1px 0 rgba(0,0,0,0.03), 0 0 40px rgba(184,150,15,0.04); } /* venture-card hover border */ [data-theme="light"] .venture-card:hover { border-color: rgba(184,150,15,0.3); box-shadow: 0 0 30px rgba(184,150,15,0.06); } /* ── FOUC PREVENTION (fallback for edge cases) ──────────────── */ /* PHP already sets data-theme on , so this only fires if the attribute is missing (e.g. static HTML cache, JS error). The inline