/* ═══════════════════════════════════════════════════════════ RateMySong.ai — Theme System Single source of truth for all theme variables. ═══════════════════════════════════════════════════════════ */ /* ─── Flash prevention (inline in reads localStorage) ─── */ /* ─── DARK THEME (default) ─── */ :root, [data-theme="dark"] { /* Surfaces */ --surface-page: #030617; --surface-card: #111827; --surface-elevated: #1f2937; --surface-recessed: #0b0f1a; --surface-input: rgba(17, 24, 39, 0.55); --surface-hover: rgba(255,255,255,0.03); /* Text */ --text-primary: #f3f4f6; --text-secondary: #9ca3af; --text-tertiary: #6b7280; --text-inverse: #111827; --text-white: #ffffff; /* Borders */ --border-default: rgba(75, 85, 99, 0.4); --border-subtle: rgba(55, 65, 81, 0.7); --border-strong: rgba(107, 114, 128, 0.6); /* Accent (indigo) */ --accent-primary: #818cf8; --accent-dim-bg: rgba(129,140,248,0.15); --accent-hover: rgba(129,140,248,0.05); --accent-gradient-from: #6366F1; --accent-gradient-to: #4F46E5; /* Body background */ --body-bg: #030617; --body-bg-950: #030617; /* Specific components */ --modal-bg: #111827; --modal-overlay: rgba(0,0,0,0.7); --toast-bg: #1f2937; --toast-text: #e5e7eb; --toast-border: rgba(75,85,99,0.3); --dropdown-bg: #111827; /* Score ring */ --ring-track: #2A2A3A; --ring-inner-bg: #12121A; /* V2 cards */ --v2-card-bg: #12121A; --v2-card-elevated: #1A1A25; --v2-factor-glass: rgba(18,18,26,0.7); --v2-sticky-bg: rgba(10,10,15,0.95); --v2-sticky-border: #2A2A3A; /* Waveform */ --waveform-bg-start: rgba(17,24,39,0.9); --waveform-bg-end: rgba(15,23,42,0.96); --waveform-vignette: rgba(2,6,23,0.58); --waveform-vignette-end: rgba(2,6,23,0.62); /* Header */ --header-border: rgba(55, 65, 81, 0.5); --header-chip-bg: rgba(17, 24, 39, 0.6); --header-chip-border: rgba(55, 65, 81, 0.9); --header-chip-color: #9ca3af; --header-chip-hover-bg: rgba(31, 41, 55, 0.85); --header-chip-hover-color: #e5e7eb; --header-chip-hover-border: rgba(107, 114, 128, 0.95); /* Intent cards */ --intent-card-bg: rgba(31, 41, 55, 0.72); --intent-card-border: rgba(75, 85, 99, 0.8); --intent-card-hover-bg: rgba(55, 65, 81, 0.86); --intent-card-hover-border: rgba(107, 114, 128, 0.95); --intent-ring-bg: rgba(3, 7, 18, 0.7); --intent-ring-border: rgba(156, 163, 175, 0.85); --intent-depth-active-bg: rgba(255,255,255,0.88); --intent-depth-active-color: #111827; --intent-depth-active-border: rgba(255,255,255,0.88); /* Coach chips */ --coach-chip-bg: rgba(255,255,255,0.03); --coach-chip-border: rgba(255,255,255,0.08); --coach-chip-color: #cbd5e1; --coach-chip-hover-border: rgba(255,255,255,0.14); --coach-chip-hover-color: #e2e8f0; /* Segment modifier */ --seg-modifier-bg: rgba(255,255,255,0.06); --seg-modifier-border: rgba(255,255,255,0.08); /* Score explainer */ --explainer-item-bg: rgba(31, 41, 55, 0.45); --explainer-item-border: rgba(75, 85, 99, 0.35); --explainer-meta-bg: rgba(17, 24, 39, 0.45); /* Task dock */ --task-dock-bg: rgba(17, 24, 39, 0.92); --task-dock-border: rgba(75, 85, 99, 0.55); --task-dock-track: rgba(55, 65, 81, 0.9); /* Processing overlay */ --processing-overlay-start: rgba(17,24,39,0.74); --processing-overlay-end: rgba(10,14,23,0.88); /* Fix card */ --fix-card-hover: rgba(17,24,39,0.6); /* Compare */ --compare-card-hover: rgba(17,24,39,0.6); /* Admin */ --admin-card-bg: rgba(31, 41, 55, 0.72); --admin-card-border: rgba(75, 85, 99, 0.9); --admin-tab-bg: rgba(17, 24, 39, 0.55); --admin-tab-border: rgba(55, 65, 81, 0.7); /* Personalisation */ --personal-card-bg: rgba(17, 24, 39, 0.45); --personal-card-border: rgba(75, 85, 99, 0.6); /* Credit pack */ --credit-pack-border: rgba(75,85,99,0.3); /* Misc */ --feedback-mini-bg: rgba(17, 24, 39, 0.55); --feedback-mini-border: rgba(75, 85, 99, 0.7); --voice-chip-bg: rgba(17, 24, 39, 0.55); --voice-chip-border: rgba(75, 85, 99, 0.75); --voice-active-bg: rgba(55, 65, 81, 0.65); --voice-active-color: #e5e7eb; --sign-in-bg: rgba(17, 24, 39, 0.5); --sign-in-border: rgba(55, 65, 81, 0.7); --sign-in-color: #d1d5db; --sign-in-hover-bg: rgba(31, 41, 55, 0.8); --sign-in-hover-border: rgba(75, 85, 99, 0.7); /* Layout toggle */ --layout-toggle-bg: rgba(0,0,0,0.2); --layout-toggle-border: rgba(42,42,58,0.8); --layout-toggle-active-bg: white; --layout-toggle-active-color: #111; --layout-toggle-inactive-color: #6B7280; /* Ghost / expander buttons */ --ghost-border: #374151; --ghost-color: #9CA3AF; --ghost-hover-border: white; --ghost-hover-color: white; /* Logo */ --logo-accent: #818cf8; --logo-dim: #6b7280; /* Landing hero glow */ --hero-glow: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(130,70,195,0.07) 0%, transparent 60%); /* Drop zone */ --dropzone-bg: rgba(17, 24, 39, 0.3); --dropzone-border: rgba(55, 65, 81, 0.6); --dropzone-dragover-bg: rgba(129, 140, 248, 0.12); --dropzone-dragover-border: rgba(129, 140, 248, 0.45); /* Landing score card */ --landing-card-bg: rgba(17, 24, 39, 0.4); --landing-card-border: rgba(55, 65, 81, 0.7); --landing-bar-track: #1f2937; /* Blog prose */ --prose-heading: #fff; --prose-text: #9ca3af; --prose-strong: #d1d5db; --prose-blockquote-border: rgba(130,70,195,0.4); /* Meta theme-color (read by JS) */ --meta-theme-color: #0b0f1a; /* Dot grid (landing/blog) */ --dot-grid: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px); } /* ─── LIGHT THEME ─── */ [data-theme="light"] { /* Surfaces */ --surface-page: #f5eee1; --surface-card: #faf7f2; --surface-elevated: #ffffff; --surface-recessed: #ede5d6; --surface-input: rgba(18, 22, 29, 0.04); --surface-hover: rgba(18, 22, 29, 0.04); /* Text */ --text-primary: rgba(18, 22, 29, 0.87); --text-secondary: rgba(18, 22, 29, 0.55); --text-tertiary: rgba(18, 22, 29, 0.38); --text-inverse: #f3f4f6; --text-white: rgba(18, 22, 29, 0.87); /* Borders */ --border-default: rgba(18, 22, 29, 0.10); --border-subtle: rgba(18, 22, 29, 0.06); --border-strong: rgba(18, 22, 29, 0.18); /* Accent (deepened indigo for cream) */ --accent-primary: #4F46E5; --accent-dim-bg: rgba(79,70,229,0.10); --accent-hover: rgba(79,70,229,0.05); --accent-gradient-from: #4F46E5; --accent-gradient-to: #4338CA; /* Body background */ --body-bg: #f5eee1; --body-bg-950: #f5eee1; /* Specific components */ --modal-bg: #ffffff; --modal-overlay: rgba(18, 22, 29, 0.4); --toast-bg: #ffffff; --toast-text: rgba(18, 22, 29, 0.87); --toast-border: rgba(18, 22, 29, 0.10); --dropdown-bg: #ffffff; /* Score ring */ --ring-track: #e8e0d4; --ring-inner-bg: #faf7f2; /* V2 cards */ --v2-card-bg: #faf7f2; --v2-card-elevated: #ffffff; --v2-factor-glass: rgba(250,247,242,0.85); --v2-sticky-bg: rgba(245,238,225,0.95); --v2-sticky-border: rgba(18, 22, 29, 0.10); /* Waveform */ --waveform-bg-start: rgba(237,229,214,0.9); --waveform-bg-end: rgba(237,229,214,0.96); --waveform-vignette: rgba(245,238,225,0.58); --waveform-vignette-end: rgba(245,238,225,0.62); /* Header */ --header-border: rgba(18, 22, 29, 0.08); --header-chip-bg: rgba(18, 22, 29, 0.04); --header-chip-border: rgba(18, 22, 29, 0.10); --header-chip-color: rgba(18, 22, 29, 0.55); --header-chip-hover-bg: rgba(18, 22, 29, 0.08); --header-chip-hover-color: rgba(18, 22, 29, 0.87); --header-chip-hover-border: rgba(18, 22, 29, 0.18); /* Intent cards */ --intent-card-bg: #faf7f2; --intent-card-border: rgba(18, 22, 29, 0.12); --intent-card-hover-bg: #ffffff; --intent-card-hover-border: rgba(18, 22, 29, 0.22); --intent-ring-bg: #ffffff; --intent-ring-border: rgba(18, 22, 29, 0.25); --intent-depth-active-bg: rgba(18, 22, 29, 0.87); --intent-depth-active-color: #ffffff; --intent-depth-active-border: rgba(18, 22, 29, 0.87); /* Coach chips */ --coach-chip-bg: rgba(18, 22, 29, 0.03); --coach-chip-border: rgba(18, 22, 29, 0.08); --coach-chip-color: rgba(18, 22, 29, 0.55); --coach-chip-hover-border: rgba(18, 22, 29, 0.14); --coach-chip-hover-color: rgba(18, 22, 29, 0.72); /* Segment modifier */ --seg-modifier-bg: rgba(18, 22, 29, 0.04); --seg-modifier-border: rgba(18, 22, 29, 0.08); /* Score explainer */ --explainer-item-bg: rgba(18, 22, 29, 0.03); --explainer-item-border: rgba(18, 22, 29, 0.08); --explainer-meta-bg: rgba(18, 22, 29, 0.03); /* Task dock */ --task-dock-bg: rgba(255, 255, 255, 0.92); --task-dock-border: rgba(18, 22, 29, 0.10); --task-dock-track: rgba(18, 22, 29, 0.08); /* Processing overlay */ --processing-overlay-start: rgba(250,247,242,0.74); --processing-overlay-end: rgba(245,238,225,0.88); /* Fix card */ --fix-card-hover: rgba(18, 22, 29, 0.03); /* Compare */ --compare-card-hover: rgba(18, 22, 29, 0.03); /* Admin */ --admin-card-bg: #faf7f2; --admin-card-border: rgba(18, 22, 29, 0.10); --admin-tab-bg: rgba(18, 22, 29, 0.03); --admin-tab-border: rgba(18, 22, 29, 0.08); /* Personalisation */ --personal-card-bg: rgba(18, 22, 29, 0.03); --personal-card-border: rgba(18, 22, 29, 0.10); /* Credit pack */ --credit-pack-border: rgba(18, 22, 29, 0.10); /* Misc */ --feedback-mini-bg: rgba(18, 22, 29, 0.03); --feedback-mini-border: rgba(18, 22, 29, 0.10); --voice-chip-bg: rgba(18, 22, 29, 0.03); --voice-chip-border: rgba(18, 22, 29, 0.12); --voice-active-bg: rgba(18, 22, 29, 0.06); --voice-active-color: rgba(18, 22, 29, 0.87); --sign-in-bg: rgba(18, 22, 29, 0.04); --sign-in-border: rgba(18, 22, 29, 0.12); --sign-in-color: rgba(18, 22, 29, 0.65); --sign-in-hover-bg: rgba(18, 22, 29, 0.08); --sign-in-hover-border: rgba(18, 22, 29, 0.20); /* Layout toggle */ --layout-toggle-bg: rgba(18, 22, 29, 0.04); --layout-toggle-border: rgba(18, 22, 29, 0.10); --layout-toggle-active-bg: rgba(18, 22, 29, 0.87); --layout-toggle-active-color: #fff; --layout-toggle-inactive-color: rgba(18, 22, 29, 0.38); /* Ghost / expander buttons */ --ghost-border: rgba(18, 22, 29, 0.12); --ghost-color: rgba(18, 22, 29, 0.45); --ghost-hover-border: rgba(18, 22, 29, 0.55); --ghost-hover-color: rgba(18, 22, 29, 0.87); /* Logo */ --logo-accent: #4F46E5; --logo-dim: rgba(18, 22, 29, 0.38); /* Landing hero glow */ --hero-glow: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(79,70,229,0.05) 0%, transparent 60%); /* Drop zone */ --dropzone-bg: rgba(18, 22, 29, 0.02); --dropzone-border: rgba(18, 22, 29, 0.12); --dropzone-dragover-bg: rgba(79, 70, 229, 0.06); --dropzone-dragover-border: rgba(79, 70, 229, 0.35); /* Landing score card */ --landing-card-bg: #faf7f2; --landing-card-border: rgba(18, 22, 29, 0.10); --landing-bar-track: #ede5d6; /* Blog prose */ --prose-heading: rgba(18, 22, 29, 0.87); --prose-text: rgba(18, 22, 29, 0.55); --prose-strong: rgba(18, 22, 29, 0.72); --prose-blockquote-border: rgba(79,70,229,0.3); /* Meta theme-color */ --meta-theme-color: #f5eee1; /* Dot grid */ --dot-grid: radial-gradient(rgba(18,22,29,0.04) 1px, transparent 1px); } /* ═══════════════════════════════════════════════════════════ Tailwind utility overrides — LIGHT THEME ONLY These use [data-theme="light"] + !important so they only activate in light mode. Zero risk to dark theme. ═══════════════════════════════════════════════════════════ */ /* Body / page backgrounds */ [data-theme="light"] .bg-gray-950, [data-theme="light"] .bg-\[\#0b0f1a\] { background-color: var(--surface-page) !important; } [data-theme="light"] .bg-gray-900, [data-theme="light"] .bg-gray-900\/30, [data-theme="light"] .bg-gray-900\/40, [data-theme="light"] .bg-gray-900\/50 { background-color: var(--surface-card) !important; } [data-theme="light"] .bg-gray-800, [data-theme="light"] .bg-gray-800\/30, [data-theme="light"] .bg-gray-800\/80 { background-color: var(--surface-recessed) !important; } /* Text colors */ [data-theme="light"] .text-white { color: var(--text-primary) !important; } [data-theme="light"] .text-gray-100 { color: var(--text-primary) !important; } [data-theme="light"] .text-gray-200 { color: var(--text-primary) !important; } [data-theme="light"] .text-gray-300 { color: var(--text-secondary) !important; } [data-theme="light"] .text-gray-400 { color: var(--text-secondary) !important; } [data-theme="light"] .text-gray-500 { color: var(--text-tertiary) !important; } [data-theme="light"] .text-gray-600 { color: var(--text-tertiary) !important; } /* Borders */ [data-theme="light"] .border-gray-700, [data-theme="light"] .border-gray-700\/50, [data-theme="light"] .border-gray-700\/60, [data-theme="light"] .border-gray-700\/70 { border-color: var(--border-default) !important; } [data-theme="light"] .border-gray-800, [data-theme="light"] .border-gray-800\/40, [data-theme="light"] .border-gray-800\/50, [data-theme="light"] .border-gray-800\/60, [data-theme="light"] .border-gray-800\/70 { border-color: var(--border-subtle) !important; } /* Indigo accent */ [data-theme="light"] .text-indigo-400 { color: var(--accent-primary) !important; } [data-theme="light"] .bg-indigo-500\/5 { background-color: var(--accent-hover) !important; } /* Hover backgrounds */ [data-theme="light"] .hover\:bg-gray-800:hover { background-color: var(--surface-hover) !important; } [data-theme="light"] .hover\:bg-indigo-500\/5:hover { background-color: var(--accent-hover) !important; } [data-theme="light"] .hover\:text-white:hover { color: var(--text-primary) !important; } [data-theme="light"] .hover\:text-gray-200:hover { color: var(--text-primary) !important; } [data-theme="light"] .hover\:border-gray-500:hover { border-color: var(--border-strong) !important; } [data-theme="light"] .hover\:border-indigo-500\/40:hover { border-color: rgba(79, 70, 229, 0.35) !important; } [data-theme="light"] .hover\:bg-gray-800\/80:hover { background-color: var(--surface-hover) !important; } /* Divide */ [data-theme="light"] .divide-gray-800 > * + * { border-color: var(--border-subtle) !important; } /* Ring */ [data-theme="light"] .ring-gray-700 { --tw-ring-color: var(--border-default) !important; } /* ═══════════════════════════════════════════════════════════ Component-level LIGHT overrides These only activate under [data-theme="light"]. Dark mode CSS in app.html is completely untouched. ═══════════════════════════════════════════════════════════ */ /* Body */ [data-theme="light"] body { background-color: #f5eee1 !important; } /* Modals */ [data-theme="light"] .modal-overlay { background: rgba(18,22,29,0.4) !important; } [data-theme="light"] .modal-box { background: #ffffff !important; border-color: rgba(18,22,29,0.10) !important; } /* Toast */ [data-theme="light"] .toast { background: #ffffff !important; color: rgba(18,22,29,0.87) !important; border-color: rgba(18,22,29,0.10) !important; } /* Header */ [data-theme="light"] header { border-color: rgba(18,22,29,0.08) !important; } [data-theme="light"] .header-chip-button { color: rgba(18,22,29,0.55) !important; background: rgba(18,22,29,0.04) !important; border-color: rgba(18,22,29,0.10) !important; } [data-theme="light"] .header-chip-button:hover { color: rgba(18,22,29,0.87) !important; border-color: rgba(18,22,29,0.18) !important; background: rgba(18,22,29,0.08) !important; } [data-theme="light"] .credit-badge { background: rgba(79,70,229,0.10) !important; color: #4F46E5 !important; } [data-theme="light"] .credit-badge.credits-empty { background: rgba(239,68,68,0.12) !important; color: #dc2626 !important; } [data-theme="light"] .credit-badge.credits-daily, [data-theme="light"] .credit-badge.credits-low { background: rgba(245,158,11,0.12) !important; color: #d97706 !important; } /* User menu dropdown */ [data-theme="light"] #user-menu { background: #ffffff !important; border-color: rgba(18,22,29,0.10) !important; } [data-theme="light"] #user-menu-email { border-color: rgba(18,22,29,0.06) !important; } [data-theme="light"] .user-menu-item { color: rgba(18,22,29,0.72) !important; } [data-theme="light"] .user-menu-item:hover { background: rgba(18,22,29,0.04) !important; } /* Drop zone */ [data-theme="light"] .drop-zone { background: rgba(18,22,29,0.02) !important; } [data-theme="light"] .drop-zone.dragover { background: rgba(79,70,229,0.06) !important; box-shadow: 0 0 0 1px rgba(79,70,229,0.35) !important; } /* Intent cards */ [data-theme="light"] .intent-card-shell { background: #faf7f2 !important; border-color: rgba(18,22,29,0.12) !important; } [data-theme="light"] .intent-card-shell:hover { background: #ffffff !important; border-color: rgba(18,22,29,0.22) !important; } [data-theme="light"] .intent-card-ring { background: #ffffff !important; border-color: rgba(18,22,29,0.25) !important; } [data-theme="light"] .intent-depth-btn { color: rgba(18,22,29,0.55) !important; border-color: rgba(18,22,29,0.12) !important; } [data-theme="light"] .intent-depth-btn:hover { color: rgba(18,22,29,0.87) !important; } [data-theme="light"] .intent-depth-btn.active { background: rgba(18,22,29,0.10) !important; color: rgba(18,22,29,0.87) !important; border-color: rgba(18,22,29,0.30) !important; } /* Segment modifier */ [data-theme="light"] .seg-modifier { background: rgba(18,22,29,0.04) !important; color: rgba(18,22,29,0.55) !important; border-color: rgba(18,22,29,0.08) !important; } /* Waveform coach chips */ [data-theme="light"] .waveform-coach-chip { background: rgba(18,22,29,0.03) !important; border-color: rgba(18,22,29,0.08) !important; color: rgba(18,22,29,0.55) !important; } [data-theme="light"] .waveform-coach-chip:hover { border-color: rgba(18,22,29,0.14) !important; color: rgba(18,22,29,0.72) !important; } /* Score explainer */ [data-theme="light"] .score-explainer-list-item { background: rgba(18,22,29,0.03) !important; border-color: rgba(18,22,29,0.08) !important; color: rgba(18,22,29,0.87) !important; } [data-theme="light"] .score-explainer-meta { background: rgba(18,22,29,0.03) !important; border-color: rgba(18,22,29,0.08) !important; } [data-theme="light"] .score-explainer-meta p { color: rgba(18,22,29,0.87) !important; } [data-theme="light"] .score-explainer-tech { background: rgba(18,22,29,0.03) !important; border-color: rgba(18,22,29,0.08) !important; } [data-theme="light"] .score-explainer-tech summary { color: rgba(18,22,29,0.87) !important; } [data-theme="light"] .score-explainer-tech-body { color: rgba(18,22,29,0.55) !important; } [data-theme="light"] .score-explainer-section-title { color: rgba(18,22,29,0.55) !important; } /* Credit pack */ [data-theme="light"] .credit-pack { border-color: rgba(18,22,29,0.10) !important; } [data-theme="light"] .credit-pack:hover { border-color: rgba(79,70,229,0.4) !important; background: rgba(79,70,229,0.04) !important; } /* Voice / feedback controls */ [data-theme="light"] .voice-chip-btn { border-color: rgba(18,22,29,0.12) !important; background: rgba(18,22,29,0.03) !important; } [data-theme="light"] .voice-style-option.active { background: rgba(18,22,29,0.06) !important; color: rgba(18,22,29,0.87) !important; } [data-theme="light"] .feedback-mini-control { border-color: rgba(18,22,29,0.10) !important; background: rgba(18,22,29,0.03) !important; } [data-theme="light"] .feedback-mini-control label { color: rgba(18,22,29,0.55) !important; } [data-theme="light"] .feedback-mini-select { color: rgba(18,22,29,0.87) !important; } [data-theme="light"] .feedback-mini-select option { background: #ffffff !important; color: rgba(18,22,29,0.87) !important; } [data-theme="light"] .feedback-save-default-btn { border-color: rgba(18,22,29,0.10) !important; background: rgba(18,22,29,0.03) !important; color: rgba(18,22,29,0.55) !important; } [data-theme="light"] .feedback-save-default-btn:hover { color: rgba(18,22,29,0.87) !important; } /* Personalisation */ [data-theme="light"] .personal-style-card { border-color: rgba(18,22,29,0.10) !important; background: rgba(18,22,29,0.03) !important; } [data-theme="light"] .personal-style-title { color: rgba(18,22,29,0.87) !important; } [data-theme="light"] .personal-style-sub { color: rgba(18,22,29,0.55) !important; } [data-theme="light"] .personal-seg-btn { color: rgba(18,22,29,0.55) !important; background: rgba(18,22,29,0.03) !important; } [data-theme="light"] .personal-seg-btn:hover { color: rgba(18,22,29,0.87) !important; } [data-theme="light"] .personal-seg-btn + .personal-seg-btn { border-color: rgba(18,22,29,0.10) !important; } [data-theme="light"] .personal-seg-btn.active { color: rgba(18,22,29,0.87) !important; } /* Task dock */ [data-theme="light"] .task-dock-card { background: rgba(255,255,255,0.92) !important; border-color: rgba(18,22,29,0.10) !important; } [data-theme="light"] .task-dock-progress { background: rgba(18,22,29,0.08) !important; } /* Admin */ [data-theme="light"] .admin-tab-btn { color: rgba(18,22,29,0.55) !important; border-color: rgba(18,22,29,0.08) !important; background: rgba(18,22,29,0.03) !important; } [data-theme="light"] .admin-tab-btn:hover { color: rgba(18,22,29,0.87) !important; } [data-theme="light"] .admin-tab-btn.active { color: #4F46E5 !important; border-color: rgba(79,70,229,0.35) !important; background: rgba(79,70,229,0.08) !important; } [data-theme="light"] .admin-metric-card { background: #faf7f2 !important; border-color: rgba(18,22,29,0.06) !important; } [data-theme="light"] .admin-metric-label { color: rgba(18,22,29,0.55) !important; } [data-theme="light"] .admin-metric-value { color: rgba(18,22,29,0.87) !important; } [data-theme="light"] .admin-metric-sub { color: rgba(18,22,29,0.38) !important; } [data-theme="light"] .admin-modal-box { background: #ffffff !important; } /* Admin — toolbar buttons */ [data-theme="light"] #admin-refresh-btn, [data-theme="light"] #admin-export-btn { background: rgba(18,22,29,0.04) !important; color: rgba(18,22,29,0.55) !important; border: 1px solid rgba(18,22,29,0.08) !important; } [data-theme="light"] #admin-refresh-btn:hover, [data-theme="light"] #admin-export-btn:hover { background: rgba(18,22,29,0.08) !important; color: rgba(18,22,29,0.87) !important; } /* Admin — table */ [data-theme="light"] #admin-table-wrap { border-color: rgba(18,22,29,0.08) !important; } [data-theme="light"] #admin-table-wrap thead { background: rgba(18,22,29,0.03) !important; } [data-theme="light"] #admin-table-wrap thead th { color: rgba(18,22,29,0.45) !important; } [data-theme="light"] #admin-table-wrap .admin-sort-btn { color: rgba(18,22,29,0.45) !important; } [data-theme="light"] #admin-table-wrap tbody tr { border-color: rgba(18,22,29,0.06) !important; } [data-theme="light"] #admin-table-wrap td .text-gray-200 { color: rgba(18,22,29,0.87) !important; } [data-theme="light"] #admin-table-wrap td .text-gray-300, [data-theme="light"] #admin-table-wrap td.text-gray-300 { color: rgba(18,22,29,0.72) !important; } [data-theme="light"] #admin-table-wrap td .text-gray-500 { color: rgba(18,22,29,0.45) !important; } [data-theme="light"] #admin-table-wrap td .text-gray-600, [data-theme="light"] #admin-table-wrap td .text-gray-700 { color: rgba(18,22,29,0.32) !important; } /* Admin — action buttons */ [data-theme="light"] #admin-table-wrap [data-admin-action="set-credits"] { background: rgba(18,22,29,0.03) !important; border-color: rgba(18,22,29,0.10) !important; color: rgba(18,22,29,0.45) !important; } [data-theme="light"] #admin-table-wrap [data-admin-action="set-credits"]:hover { background: rgba(18,22,29,0.06) !important; color: rgba(18,22,29,0.87) !important; } [data-theme="light"] #admin-table-wrap [data-admin-action="delete-user"] { background: rgba(220,38,38,0.06) !important; border-color: rgba(220,38,38,0.15) !important; color: #dc2626 !important; } [data-theme="light"] #admin-table-wrap [data-admin-action="delete-user"]:hover { background: rgba(220,38,38,0.10) !important; } [data-theme="light"] #admin-table-wrap [data-admin-action="toggle-disable"][data-disabled="0"] { background: rgba(220,38,38,0.06) !important; border-color: rgba(220,38,38,0.15) !important; color: #dc2626 !important; } [data-theme="light"] #admin-table-wrap [data-admin-action="toggle-disable"][data-disabled="0"]:hover { background: rgba(220,38,38,0.10) !important; } [data-theme="light"] #admin-table-wrap [data-admin-action="toggle-disable"][data-disabled="1"] { background: rgba(22,163,74,0.06) !important; border-color: rgba(22,163,74,0.15) !important; color: #16a34a !important; } [data-theme="light"] #admin-table-wrap [data-admin-action="toggle-disable"][data-disabled="1"]:hover { background: rgba(22,163,74,0.10) !important; } [data-theme="light"] #admin-table-wrap .text-red-300 { color: #dc2626 !important; } /* Admin — selects (cohorts) */ [data-theme="light"] #admin-modal select { background: #faf7f2 !important; border-color: rgba(18,22,29,0.10) !important; color: rgba(18,22,29,0.87) !important; } [data-theme="light"] #admin-modal select option { background: #ffffff !important; color: rgba(18,22,29,0.87) !important; } /* Fix / compare cards */ [data-theme="light"] .fix-card:hover { background: rgba(18,22,29,0.03) !important; } [data-theme="light"] .fix-feedback-btn { border-color: rgba(18,22,29,0.10) !important; background: rgba(18,22,29,0.03) !important; color: rgba(18,22,29,0.55) !important; } [data-theme="light"] .compare-card:hover { background: rgba(18,22,29,0.03) !important; } /* Results icon btn */ [data-theme="light"] .results-icon-btn { color: rgba(18,22,29,0.55) !important; } [data-theme="light"] .results-icon-btn:hover { color: rgba(18,22,29,0.87) !important; } /* Classic results header */ [data-theme="light"] #results-filename { color: rgba(18,22,29,0.62) !important; } [data-theme="light"] #results-package-badge { background: rgba(79,70,229,0.08) !important; border-color: rgba(79,70,229,0.22) !important; color: #4F46E5 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.46); } [data-theme="light"] #genre-badge, [data-theme="light"] #subgenre-badge, [data-theme="light"] #production-badge { background: rgba(18,22,29,0.06) !important; border-color: rgba(18,22,29,0.07) !important; color: rgba(18,22,29,0.66) !important; } [data-theme="light"] #production-badge { background: rgba(18,22,29,0.10) !important; color: rgba(18,22,29,0.74) !important; } [data-theme="light"] #key-badge, [data-theme="light"] #tempo-badge { background: rgba(37,99,235,0.10) !important; color: #2563eb !important; } /* Revision Journey — light-native card */ [data-theme="light"] #results-hero-dropzone { background: #faf7f2 !important; border-color: rgba(18,22,29,0.10) !important; box-shadow: none !important; } [data-theme="light"] #results-hero-dropzone .text-indigo-200, [data-theme="light"] #results-hero-dropzone .text-indigo-100, [data-theme="light"] #results-hero-dropzone .text-indigo-200\/65, [data-theme="light"] #results-hero-dropzone .text-indigo-100\/80 { color: #4F46E5 !important; } [data-theme="light"] #results-hero-dropzone #hero-score-label { color: rgba(18,22,29,0.55) !important; } [data-theme="light"] #results-hero-dropzone #hero-score-value { color: rgba(18,22,29,0.87) !important; } [data-theme="light"] #results-hero-dropzone #hero-score-value span:last-child { color: rgba(18,22,29,0.45) !important; } [data-theme="light"] #results-hero-dropzone .hero-score-core { background: #faf7f2 !important; border-color: rgba(18,22,29,0.06) !important; } [data-theme="light"] #results-hero-dropzone .hero-score-ring { background: conic-gradient( rgba(var(--genre-accent), 0.90) 0deg var(--score-ring-angle), #e8e0d4 var(--score-ring-angle) 360deg ) !important; } [data-theme="light"] #results-hero-dropzone #hero-try-next-wrap { background: rgba(79,70,229,0.06) !important; border-color: rgba(79,70,229,0.18) !important; } [data-theme="light"] #results-hero-dropzone #hero-try-next-wrap span:first-child { background: rgba(79,70,229,0.12) !important; color: #4F46E5 !important; } [data-theme="light"] #results-hero-dropzone .hero-version-card { background: rgba(18,22,29,0.04) !important; border-color: rgba(18,22,29,0.10) !important; } [data-theme="light"] #results-hero-dropzone .hero-version-line { background: linear-gradient(90deg, rgba(79,70,229,0.35), rgba(79,70,229,0.10)) !important; } [data-theme="light"] #rate-another-btn { background: rgba(255,255,255,0.62) !important; border-color: rgba(18,22,29,0.14) !important; color: rgba(18,22,29,0.78) !important; } [data-theme="light"] #rate-another-btn:hover { background: rgba(255,255,255,0.86) !important; border-color: rgba(18,22,29,0.22) !important; color: rgba(18,22,29,0.90) !important; } /* Direction chip */ [data-theme="light"] .direction-chip { background: rgba(79,70,229,0.08) !important; color: #4F46E5 !important; } /* Hero score ring */ [data-theme="light"] .hero-score-core { border-color: rgba(18,22,29,0.06) !important; background: #faf7f2 !important; } [data-theme="light"] .hero-version-node { border-color: rgba(18,22,29,0.06) !important; background: rgba(18,22,29,0.03) !important; } /* Upload gradient */ [data-theme="light"] .staged-upload-btn-gradient { background: linear-gradient(135deg, #4F46E5, #4338CA) !important; } /* V2 Coach's Report */ [data-theme="light"] .v2-act-heading { color: rgba(18,22,29,0.38) !important; } [data-theme="light"] .v2-card { background: #faf7f2 !important; } [data-theme="light"] .v2-card-elevated { background: #ffffff !important; } [data-theme="light"] .v2-score-ring .v2-ring-track { stroke: #e8e0d4 !important; } [data-theme="light"] .v2-score-ring-inner { background: #faf7f2 !important; } [data-theme="light"] .v2-score-number { color: rgba(18,22,29,0.87) !important; } [data-theme="light"] .v2-factor-card { background: rgba(250,247,242,0.85) !important; } [data-theme="light"] .v2-factor-bar-track { background: #e8e0d4 !important; } [data-theme="light"] .v2-coaching-card { background: #faf7f2 !important; } [data-theme="light"] .v2-fix-hero { background: #ffffff !important; } [data-theme="light"] .v2-fix-collapsed { background: #faf7f2 !important; } [data-theme="light"] .v2-fix-collapsed:hover { background: #ffffff !important; } [data-theme="light"] .v2-fix-collapsed:hover .v2-fix-title { color: rgba(18,22,29,0.87) !important; } [data-theme="light"] .v2-fix-expanded { background: #ffffff !important; } [data-theme="light"] .v2-upload-cta { background: linear-gradient(135deg, #4F46E5, #4338CA) !important; } [data-theme="light"] .v2-ghost-btn { border-color: rgba(18,22,29,0.12) !important; color: rgba(18,22,29,0.45) !important; } [data-theme="light"] .v2-ghost-btn:hover { border-color: rgba(18,22,29,0.55) !important; color: rgba(18,22,29,0.87) !important; } [data-theme="light"] .v2-journey-line { background: rgba(18,22,29,0.12) !important; } [data-theme="light"] .v2-sticky-bar { background: rgba(245,238,225,0.95) !important; border-color: rgba(18,22,29,0.10) !important; } [data-theme="light"] .v2-drawer-inner { border-color: rgba(18,22,29,0.10) !important; } [data-theme="light"] .v2-layout-toggle { border-color: rgba(18,22,29,0.10) !important; background: rgba(18,22,29,0.04) !important; } [data-theme="light"] .v2-layout-toggle button { color: rgba(18,22,29,0.38) !important; } [data-theme="light"] .v2-layout-toggle button.active { background: rgba(18,22,29,0.87) !important; color: #fff !important; } [data-theme="light"] .v2-utility-btn { color: rgba(18,22,29,0.38) !important; } [data-theme="light"] .v2-utility-btn:hover { color: rgba(18,22,29,0.87) !important; border-color: rgba(18,22,29,0.12) !important; } [data-theme="light"] .v2-show-all-btn { border-color: rgba(18,22,29,0.12) !important; color: rgba(18,22,29,0.38) !important; } [data-theme="light"] .v2-show-all-btn:hover { border-color: rgba(18,22,29,0.55) !important; color: rgba(18,22,29,0.87) !important; } [data-theme="light"] .v2-expander-btn { border-color: rgba(18,22,29,0.12) !important; color: rgba(18,22,29,0.38) !important; } [data-theme="light"] .v2-expander-btn:hover { border-color: rgba(18,22,29,0.55) !important; color: rgba(18,22,29,0.87) !important; } [data-theme="light"] .v2-dropzone-active { border-color: #4F46E5 !important; background: rgba(79,70,229,0.04) !important; } [data-theme="light"] .v2-verdict-pill { opacity: 0.85; } /* Waveform player area */ [data-theme="light"] #waveform-player { background: var(--surface-card) !important; } [data-theme="light"] #waveform-player .border-white\/5 { border-color: rgba(18,22,29,0.06) !important; } [data-theme="light"] #waveform-mode-toggle { background: rgba(18,22,29,0.04) !important; border-color: rgba(18,22,29,0.10) !important; } [data-theme="light"] .waveform-mode-btn:not(.active) { color: rgba(18,22,29,0.38) !important; } [data-theme="light"] .waveform-mode-btn:not(.active):hover { color: rgba(18,22,29,0.72) !important; } [data-theme="light"] #waveform-mode-listen.active { background: rgba(79,70,229,0.10) !important; color: #4F46E5 !important; } [data-theme="light"] #waveform-mode-improve.active { background: rgba(245,158,11,0.10) !important; color: #d97706 !important; } [data-theme="light"] #waveform-insight-dock { background: rgba(18,22,29,0.03) !important; border-color: rgba(18,22,29,0.08) !important; } [data-theme="light"] #waveform-insight-dock .text-emerald-100 { color: #059669 !important; } [data-theme="light"] #waveform-insight-dock .text-amber-100 { color: #d97706 !important; } [data-theme="light"] #waveform-insight-dock .text-indigo-100 { color: #4F46E5 !important; } [data-theme="light"] #play-pause-btn { background: rgba(18,22,29,0.06) !important; } [data-theme="light"] #play-pause-btn:hover { background: rgba(18,22,29,0.10) !important; } [data-theme="light"] #play-pause-btn svg { color: rgba(18,22,29,0.55) !important; } [data-theme="light"] #hook-marker span { background: rgba(245,238,225,0.9) !important; } /* Tooltip / info icon buttons */ [data-theme="light"] .market-factor-info-btn { color: rgba(18,22,29,0.62) !important; border-color: rgba(18,22,29,0.35) !important; } [data-theme="light"] .market-factor-info-btn:hover { color: rgba(18,22,29,0.87) !important; border-color: rgba(18,22,29,0.65) !important; } /* Waveform layer toggle (Audio / Levels / Spectral / Listener Response) */ [data-theme="light"] #waveform-layer-toggle { background: rgba(18,22,29,0.04) !important; border-color: rgba(18,22,29,0.10) !important; } [data-theme="light"] .waveform-layer-btn:not(.active) { color: rgba(18,22,29,0.38) !important; } [data-theme="light"] .waveform-layer-btn:not(.active):hover { color: rgba(18,22,29,0.72) !important; } [data-theme="light"] .waveform-layer-btn.active { background: rgba(18,22,29,0.08) !important; color: rgba(18,22,29,0.87) !important; } /* Staged file chip */ .staged-file-chip { background: #12121A; } [data-theme="light"] .staged-file-chip { background: #ffffff !important; border-color: rgba(18,22,29,0.14) !important; color: rgba(18,22,29,0.72) !important; } [data-theme="light"] .staged-file-chip:hover { border-color: rgba(18,22,29,0.28) !important; } /* Intent modal — selected card title stays dark in light theme */ [data-theme="light"] .intent-radio:checked + .intent-card-shell .intent-card-title { color: rgba(18,22,29,0.87) !important; } /* Intent modal — studio-tier active pill uses indigo instead of dark ink */ [data-theme="light"] .intent-depth-btn.studio-tier.active { background: rgba(79,70,229,0.10) !important; color: #4F46E5 !important; border-color: rgba(79,70,229,0.32) !important; } /* Studio expansion panel (depth detail below intent card) */ [data-theme="light"] .studio-expansion { background: rgba(79,70,229,0.04) !important; border-color: rgba(79,70,229,0.16) !important; } [data-theme="light"] .studio-expansion-tag { color: #4F46E5 !important; } [data-theme="light"] .studio-expansion-meta { color: rgba(79,70,229,0.65) !important; } [data-theme="light"] .studio-expansion-label { color: rgba(18,22,29,0.65) !important; } [data-theme="light"] .studio-expansion-data { color: rgba(18,22,29,0.87) !important; } [data-theme="light"] .studio-expansion-divider { background: rgba(18,22,29,0.08) !important; } [data-theme="light"] .studio-expansion-promise { color: rgba(79,70,229,0.72) !important; } /* Artist context / matched track badge */ [data-theme="light"] #market-truth-badge.bg-amber-600\/75 { background-color: rgba(180,83,9,0.08) !important; color: #92400e !important; border: 1px solid rgba(180,83,9,0.22) !important; } [data-theme="light"] #market-truth-badge.bg-rose-600\/75 { background-color: rgba(185,28,28,0.08) !important; color: #b91c1c !important; border: 1px solid rgba(185,28,28,0.22) !important; }