/* ============================================================ MIRAKILOUZ BEATZ — THEME SYSTEM Dark is the default/native look. [data-theme="light"] on flips the variables and overrides the Tailwind utility classes used throughout the site (bg-black, text-white, bg-gray-900, etc). ============================================================ */ :root, [data-theme="dark"] { --bg: #0b0b0b; --surface: #151515; --surface-soft: #1f1f1f; --surface-strong: #262626; --text-primary: #ffffff; --text-secondary: #a5a5a5; --text-tertiary: #6b6b6b; --text-muted: #2a2a2a; --border: rgba(255, 255, 255, 0.08); --accent: #FF6A00; --accent-dark: #e05a00; --accent-contrast: #000000; --success: #4ade80; --success-bg: rgba(74, 222, 128, 0.15); --success-border: rgba(74, 222, 128, 0.3); --danger: #f87171; --danger-bg: rgba(248, 113, 113, 0.15); --danger-border: rgba(248, 113, 113, 0.3); --input-bg: #141414; --overlay: rgba(0, 0, 0, 0.75); --surface-elevated: rgba(21, 21, 21, 0.6); --hero-overlay: linear-gradient(135deg, rgba(255, 106, 0, 0.15) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.9) 100%); } [data-theme="light"] { --bg: #ffffff; --surface: #f7f7f7; --surface-soft: #eeeeee; --surface-strong: #e2e2e2; --text-primary: #111111; --text-secondary: #555555; --text-tertiary: #767676; --text-muted: #949494; --border: rgba(0, 0, 0, 0.10); --accent: #FF6A00; --accent-dark: #e05a00; --accent-contrast: #ffffff; --success: #16a34a; --success-bg: rgba(22, 163, 74, 0.12); --success-border: rgba(22, 163, 74, 0.30); --danger: #dc2626; --danger-bg: rgba(220, 38, 38, 0.10); --danger-border: rgba(220, 38, 38, 0.30); --input-bg: #ffffff; --overlay: rgba(0, 0, 0, 0.45); --surface-elevated: rgba(255, 255, 255, 0.7); /* Minimal — just enough to keep the centered text/buttons legible near the bottom of the photo. The image itself must stay crisp and rich, never washed out with a flat white/light tint. */ --hero-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.22) 55%, rgba(0, 0, 0, 0.5) 100%); } html { background: var(--bg); } [data-theme="dark"] .site-logo-img { filter: brightness(0) invert(1); } body { transition: background-color .2s ease, color .2s ease; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2) !important; } [data-theme="light"] ::selection { background: rgba(255, 106, 0, 0.25); } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #8a8a8a !important; opacity: 1; } /* ── TAILWIND UTILITY OVERRIDES (LIGHT MODE ONLY) ──────────────── */ [data-theme="light"] .bg-black, [data-theme="light"] .bg-gray-950, [data-theme="light"] .bg-neutral-950 { background-color: var(--bg) !important; } [data-theme="light"] .bg-gray-900, [data-theme="light"] .bg-gray-800, [data-theme="light"] .bg-neutral-900, [data-theme="light"] .bg-neutral-800 { background-color: var(--surface) !important; } [data-theme="light"] .bg-gray-700, [data-theme="light"] .bg-neutral-700 { background-color: var(--surface-soft) !important; } [data-theme="light"] .text-white { color: var(--text-primary) !important; } [data-theme="light"] .text-gray-200, [data-theme="light"] .text-gray-300, [data-theme="light"] .text-gray-400, [data-theme="light"] .text-gray-500, [data-theme="light"] .text-neutral-300, [data-theme="light"] .text-neutral-400 { color: var(--text-secondary) !important; } [data-theme="light"] .text-gray-600, [data-theme="light"] .text-gray-700 { color: var(--text-tertiary) !important; } [data-theme="light"] .border-gray-700, [data-theme="light"] .border-gray-800, [data-theme="light"] .border-gray-900, [data-theme="light"] .border-neutral-800, [data-theme="light"] .border-neutral-900 { border-color: var(--border) !important; } [data-theme="light"] .divide-gray-800>*+*, [data-theme="light"] .divide-gray-900>*+* { border-color: var(--border) !important; } /* Success / error badges & alerts (bg-green-900/50, text-green-300, etc.) */ [data-theme="light"] [class*="bg-green-9"], [data-theme="light"] [class*="bg-green-8"] { background-color: var(--success-bg) !important; } [data-theme="light"] [class*="text-green-3"], [data-theme="light"] [class*="text-green-4"] { color: var(--success) !important; } [data-theme="light"] [class*="border-green"] { border-color: var(--success-border) !important; } [data-theme="light"] [class*="bg-red-9"], [data-theme="light"] [class*="bg-red-8"] { background-color: var(--danger-bg) !important; } [data-theme="light"] [class*="text-red-3"], [data-theme="light"] [class*="text-red-4"] { color: var(--danger) !important; } [data-theme="light"] [class*="border-red"] { border-color: var(--danger-border) !important; } /* Tailwind arbitrary-value classes (bg-[#0a0a0a], border-[#1a1a1a], etc.) — these are literal, distinct classes that neither a hex-value sweep nor the utility overrides above can reach; enumerated from what's actually used across the admin forms/tables that rely on them. */ [data-theme="light"] .bg-\[\#0a0a0a\], [data-theme="light"] .bg-\[\#0d0d0d\], [data-theme="light"] .bg-\[\#0f0f0f\] { background-color: var(--bg) !important; } [data-theme="light"] .bg-\[\#111\] { background-color: var(--surface) !important; } [data-theme="light"] .bg-\[\#1a1a1a\], [data-theme="light"] .bg-\[\#222\] { background-color: var(--surface-soft) !important; } [data-theme="light"] .bg-\[\#333\] { background-color: var(--surface-strong) !important; } [data-theme="light"] .hover\:bg-\[\#111\]:hover, [data-theme="light"] .hover\:bg-\[\#1a1a1a\]:hover { background-color: var(--surface-soft) !important; } [data-theme="light"] .border-\[\#111\], [data-theme="light"] .border-\[\#141414\], [data-theme="light"] .border-\[\#1a1a1a\], [data-theme="light"] .border-\[\#1e1e1e\], [data-theme="light"] .border-\[\#222\], [data-theme="light"] .border-\[\#252525\], [data-theme="light"] .border-\[\#2a2a2a\], [data-theme="light"] .border-\[\#333\] { border-color: var(--border) !important; } [data-theme="light"] .hover\:border-\[\#252525\]:hover, [data-theme="light"] .hover\:border-\[\#2a2a2a\]:hover { border-color: var(--border) !important; } [data-theme="light"] .text-\[\#1e1e1e\] { color: var(--text-muted) !important; } /* ── THEME TOGGLE COMPONENT ─────────────────────────────────────── */ .theme-seg { display: inline-flex; align-items: center; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; } .theme-seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: none; background: transparent; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer; white-space: nowrap; transition: background .25s cubic-bezier(.4, 0, .2, 1), color .25s ease; } .theme-seg-btn:hover { color: var(--text-primary); } .theme-seg-btn[data-active="true"] { background: var(--accent); color: var(--accent-contrast); } .theme-seg-btn[data-active="true"]:hover { color: var(--accent-contrast); } .theme-seg-compact .theme-seg-btn { padding: 7px 9px; font-size: 13px; } @media (max-width: 767px) { .theme-seg-btn { padding: 9px 14px; } .theme-seg-compact .theme-seg-btn { padding: 9px 11px; } }