/* =========================================================== Theme: Mode (dark/medium/light) + Color themes + Materia Drive these by setting classes on from React: - .mode-dark | .mode-medium | .mode-light - .palette-light | .palette-dark | .palette-dark-brown .palette-tan-brown | .palette-cyber-green | .palette-cyber-purple - .materia-{name} (see list below) =========================================================== */ /* ── Mode: DARK (default) ── */ .mode-dark, :root { --bg-app: #0a0f1a; --bg-panel: #1a2230; --bg-elevated: #232b3d; --bg-input: #111827; --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --border-color: #2b3648; --border-strong: #3b4a63; --hover-bg: #2b3648; --scrollbar-track: #0a0f1a; } /* ── Mode: MEDIUM ── */ .mode-medium { --bg-app: #1f2937; --bg-panel: #2a3548; --bg-elevated: #344256; --bg-input: #1f2937; --text-primary: #e5e7eb; --text-secondary: #9ca3af; --text-muted: #6b7280; --border-color: #3a4659; --border-strong: #4a586b; --hover-bg: #3a4659; --scrollbar-track: #1f2937; } /* ── Mode: LIGHT ── */ .mode-light { --bg-app: #f3f4f6; --bg-panel: #ffffff; --bg-elevated: #f9fafb; --bg-input: #f3f4f6; --text-primary: #111827; --text-secondary: #4b5563; --text-muted: #6b7280; --border-color: #e5e7eb; --border-strong: #d1d5db; --hover-bg: #f3f4f6; --scrollbar-track: #f3f4f6; } /* ── Color palette: LIGHT (green accent) ── */ .palette-light { --accent: #16a34a; --accent-hover: #15803d; --accent-contrast: #ffffff; --scrollbar-thumb: #16a34a; } /* ── Color palette: DARK (orange accent) ── */ .palette-dark { --accent: #fb8500; --accent-hover: #ffb703; --accent-contrast: #0a0f1a; --scrollbar-thumb: #219ebc; } /* ── Color palette: DARK BROWN (yellow accent) ── */ .palette-dark-brown { --accent: #ffb703; --accent-hover: #fb8500; --accent-contrast: #1a1206; --scrollbar-thumb: #a16207; } /* ── Color palette: TAN BROWN (white accent) ── */ .palette-tan-brown { --accent: #f5f5f4; --accent-hover: #ffffff; --accent-contrast: #44403c; --scrollbar-thumb: #a8a29e; } /* ── Color palette: CYBERPUNK LIGHT GREEN (red accent) ── */ .palette-cyber-green { --accent: #ff003c; --accent-hover: #ff4d6d; --accent-contrast: #f0fff4; --scrollbar-thumb: #00ff9c; } /* ── Color palette: CYBERPUNK PURPLE (baby blue accent) ── */ .palette-cyber-purple { --accent: #89cff0; --accent-hover: #b6e1ff; --accent-contrast: #1a0a2e; --scrollbar-thumb: #b967ff; } /* ============================================================ MATERIA — applied via .materia-{name} on These target the .materia-target class on panels/buttons. ============================================================ */ /* No materia (flat default) */ .materia-none .materia-target { background: var(--bg-elevated); border: 1px solid var(--border-color); box-shadow: none; } /* Clear Glass */ .materia-glass-clear .materia-target { background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 30px rgba(0,0,0,0.25); } /* Frosted Glass */ .materia-glass-frost .materia-target { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 20px 40px rgba(0,0,0,0.35); } /* Tinted Glass */ .materia-glass-tint .materia-target { background: linear-gradient(135deg, rgba(80,180,255,0.28), rgba(140,90,255,0.18)); border: 1px solid rgba(180,220,255,0.35); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 12px 32px rgba(60,90,200,0.4); } /* Iridescent Glass */ .materia-glass-iridescent .materia-target { background: linear-gradient(135deg, rgba(255,150,220,0.25), rgba(120,200,255,0.2) 45%, rgba(180,255,200,0.22)); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(20px) saturate(220%); -webkit-backdrop-filter: blur(20px) saturate(220%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 14px 36px rgba(200,120,255,0.35); } /* Smoke Glass */ .materia-glass-smoke .materia-target { background: linear-gradient(135deg, rgba(20,22,30,0.55), rgba(10,10,15,0.7)); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 36px rgba(0,0,0,0.5); } /* Crystal Facet */ .materia-crystal .materia-target { background: linear-gradient(120deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.28) 60%, rgba(255,255,255,0.08) 100%); border: 1px solid rgba(255,255,255,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(255,255,255,0.15), 0 18px 40px rgba(140,200,255,0.35); } /* Chalk */ .materia-chalk .materia-target { background: #1a1c22; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.03) 0%, transparent 45%); border: 1px solid rgba(255,255,255,0.06); box-shadow: inset 0 0 40px rgba(0,0,0,0.35); } /* Matte Paper */ .materia-paper .materia-target { background: #f4f0e6; border: 1px solid #e2dccc; box-shadow: inset 0 1px 0 #ffffff, 0 6px 14px rgba(60,50,30,0.15); color: #2b2620; } .materia-paper { color: #2b2620; } .materia-paper .materia-target, .materia-paper .materia-target * { color: #2b2620; } /* Neumorph Inset */ .materia-neumorph-inset .materia-target { background: #e2e6ee; border: none; box-shadow: inset 6px 6px 14px #b8bcc4, inset -6px -6px 14px #ffffff; color: #3a3e48; } .materia-neumorph-inset { color: #3a3e48; } .materia-neumorph-inset .materia-target, .materia-neumorph-inset .materia-target * { color: #3a3e48; } /* Marble */ .materia-marble .materia-target { background: linear-gradient(115deg, transparent 0%, rgba(180,180,200,0.4) 20%, transparent 25%, transparent 55%, rgba(140,140,170,0.3) 62%, transparent 68%), linear-gradient(180deg, #f4f2ee 0%, #e0dcd4 100%); border: 1px solid rgba(0,0,0,0.1); box-shadow: inset 0 2px 4px rgba(255,255,255,0.7), 0 10px 24px rgba(0,0,0,0.25); color: #2a2820; } .materia-marble { color: #2a2820; } .materia-marble .materia-target, .materia-marble .materia-target * { color: #2a2820; } /* Carbon Fiber */ .materia-carbon .materia-target { background: repeating-linear-gradient(45deg, #1a1c22 0px, #1a1c22 4px, #0e1014 4px, #0e1014 8px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 4px, transparent 4px, transparent 8px); border: 1px solid rgba(255,255,255,0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(0,0,0,0.5); color: #d0d4dc; } .materia-carbon { color: #d0d4dc; } .materia-carbon .materia-target, .materia-carbon .materia-target * { color: #d0d4dc; } /* ============================================================ THEME-AWARE OVERRIDES — restyle hardcoded Tailwind slate classes inside the app shell so the existing markup inherits the chosen mode/palette/materia without rewriting components. The .app-shell class is set on the root wrapper in App.tsx. ============================================================ */ .app-shell { color: var(--text-primary); } /* Backgrounds */ .mode-dark .app-shell .bg-slate-900, .mode-dark .app-shell .bg-slate-900\/40, .mode-dark .app-shell .bg-slate-900\/50 { background-color: var(--bg-input) !important; } .mode-dark .app-shell .bg-slate-800 { background-color: var(--bg-panel) !important; } .mode-dark .app-shell .bg-slate-700 { background-color: var(--bg-elevated) !important; } .mode-dark .app-shell .bg-slate-950 { background-color: var(--bg-app) !important; } .mode-dark .app-shell .hover\:bg-slate-700:hover { background-color: var(--hover-bg) !important; } .mode-dark .app-shell .hover\:bg-slate-600:hover { background-color: var(--hover-bg) !important; } .mode-medium .app-shell .bg-slate-900, .mode-medium .app-shell .bg-slate-900\/40, .mode-medium .app-shell .bg-slate-900\/50 { background-color: var(--bg-input) !important; } .mode-medium .app-shell .bg-slate-800 { background-color: var(--bg-panel) !important; } .mode-medium .app-shell .bg-slate-700 { background-color: var(--bg-elevated) !important; } .mode-medium .app-shell .bg-slate-950 { background-color: var(--bg-app) !important; } .mode-medium .app-shell .hover\:bg-slate-700:hover { background-color: var(--hover-bg) !important; } .mode-medium .app-shell .hover\:bg-slate-600:hover { background-color: var(--hover-bg) !important; } .mode-light .app-shell .bg-slate-900, .mode-light .app-shell .bg-slate-900\/40, .mode-light .app-shell .bg-slate-900\/50 { background-color: var(--bg-input) !important; } .mode-light .app-shell .bg-slate-800 { background-color: var(--bg-panel) !important; } .mode-light .app-shell .bg-slate-700 { background-color: var(--bg-elevated) !important; } .mode-light .app-shell .bg-slate-950 { background-color: var(--bg-app) !important; } .mode-light .app-shell .hover\:bg-slate-700:hover { background-color: var(--hover-bg) !important; } .mode-light .app-shell .hover\:bg-slate-600:hover { background-color: var(--hover-bg) !important; } /* Text */ .app-shell .text-slate-100 { color: var(--text-primary) !important; } .app-shell .text-slate-200 { color: var(--text-primary) !important; } .app-shell .text-slate-300 { color: var(--text-secondary) !important; } .app-shell .text-slate-400 { color: var(--text-secondary) !important; } .app-shell .text-slate-500 { color: var(--text-muted) !important; } .app-shell .text-slate-600 { color: var(--text-muted) !important; } .app-shell .hover\:text-white:hover { color: var(--text-primary) !important; } /* Borders */ .app-shell .border-slate-700 { border-color: var(--border-color) !important; } .app-shell .border-slate-800 { border-color: var(--border-color) !important; } .app-shell .border-slate-600 { border-color: var(--border-strong) !important; } .app-shell .divide-slate-700 > * + * { border-color: var(--border-color) !important; } /* Accent re-skin: blue → active uses var(--accent) */ .app-shell .bg-blue-600, .app-shell .bg-yellow-500 { background-color: var(--accent) !important; color: var(--accent-contrast) !important; } .app-shell .hover\:bg-blue-500:hover, .app-shell .hover\:bg-yellow-400:hover { background-color: var(--accent-hover) !important; color: var(--accent-contrast) !important; } .app-shell .text-blue-400 { color: var(--accent) !important; } .app-shell .text-yellow-400 { color: var(--accent) !important; } .app-shell .text-yellow-500 { color: var(--accent) !important; } .app-shell .ring-blue-500 { --tw-ring-color: var(--accent) !important; } .app-shell .focus\:ring-blue-500:focus { --tw-ring-color: var(--accent) !important; } .app-shell .focus\:ring-yellow-500:focus { --tw-ring-color: var(--accent) !important; } .app-shell .bg-yellow-500\/10 { background-color: color-mix(in srgb, var(--accent) 12%, transparent) !important; } /* Accent slider tracks */ .app-shell .accent-blue-500, .app-shell .accent-orange-500, .app-shell .accent-emerald-500, .app-shell .accent-yellow-500 { accent-color: var(--accent) !important; } /* Selection dashed border in Editor */ .app-shell [stroke="#3b82f6"] { stroke: var(--accent) !important; } .app-shell [fill="#3b82f6"] { fill: var(--accent) !important; } /* Body bg when set via inline style overrides */ body, html, #root { background-color: var(--bg-app); color: var(--text-primary); } /* Materia — also apply to the sidebar backgrounds when not 'none' */ .materia-glass-clear .app-shell > div, .materia-glass-clear .materia-target { background-clip: padding-box; } /* ============================================================ NOTE: All inner panels (Controls, History, Remix) now use inline `style={{ ... }}` referencing these CSS variables, so they always win over Tailwind utility classes. The legacy slate-override block above is kept harmless for any stray utility that still slips through. ============================================================ */