.theme-container { /* Dark theme (default) */ --lofi-background: #18181b; --lofi-card: #27272a; --lofi-card-hover: #3f3f46; --lofi-border: #3f3f46; --lofi-text-primary: #e4e4e7; --lofi-text-secondary: #a1a1aa; --lofi-button-bg: #3f3f46; --lofi-button-hover: #52525b; --lofi-button-text: #e4e4e7; --lofi-accent: #7e22ce; --lofi-accent-hover: #9333ea; --lofi-card-radius: 0.75rem; --lofi-button-radius: 0.5rem; --lofi-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .theme-container[data-theme='light'] { --lofi-background: #f4f4f5; --lofi-card: #e4e4e7; --lofi-card-hover: #d4d4d8; --lofi-border: #d4d4d8; --lofi-text-primary: #18181b; --lofi-text-secondary: #71717a; --lofi-button-bg: #d4d4d8; --lofi-button-hover: #a1a1aa; --lofi-button-text: #27272a; --lofi-accent: #7e22ce; --lofi-accent-hover: #9333ea; --lofi-card-radius: 0.75rem; --lofi-button-radius: 0.5rem; --lofi-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .theme-container[data-theme='vintage'] { --lofi-background: #f8e3c4; /* Warm cream background */ --lofi-card: #e6d0b0; /* Lighter cream for cards */ --lofi-card-hover: #d4be9c; /* Slightly darker on hover */ --lofi-border: #8b6d5c; /* Rich brown border */ --lofi-text-primary: #4a3628; /* Deep brown text */ --lofi-text-secondary: #6b5a4c; /* Medium brown text */ --lofi-button-bg: #c17f59; /* Terracotta buttons */ --lofi-button-hover: #d4956f; /* Lighter terracotta on hover */ --lofi-button-text: #f8e3c4; /* Light cream text */ --lofi-accent: #8b6d5c; /* Rich brown accent */ --lofi-accent-hover: #9d7e6d; /* Lighter brown on hover */ --lofi-card-radius: 0.5rem; /* Subtle rounding */ --lofi-button-radius: 0.25rem; /* Minimal button rounding */ --lofi-card-shadow: 0 4px 12px rgba(139, 109, 92, 0.2), 0 0 0 1px rgba(139, 109, 92, 0.15), inset 0 1px 0 0 rgba(248, 227, 196, 0.5), 2px 2px 0 rgba(139, 109, 92, 0.1); } .theme-container[data-theme='metallic'] { --lofi-background: #0f1215; /* Nearly black background */ --lofi-card: #1a1f25; /* Dark gunmetal */ --lofi-card-hover: #252b33; /* Lighter gunmetal on hover */ --lofi-border: #3a424d; /* Medium steel */ --lofi-text-primary: #e2e8f0; /* Bright steel */ --lofi-text-secondary: #94a3b8; /* Muted steel */ --lofi-button-bg: #2d343d; /* Dark steel buttons */ --lofi-button-hover: #3a424d; /* Medium steel on hover */ --lofi-button-text: #e2e8f0; /* Bright steel text */ --lofi-accent: #718096; /* Cool gray accent */ --lofi-accent-hover: #8b97aa; /* Lighter steel on hover */ --lofi-card-radius: 0.25rem; /* Sharp corners for metallic feel */ --lofi-button-radius: 0.125rem; /* Very subtle button rounding */ --lofi-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.05), 0 0 20px rgba(0, 0, 0, 0.2); } .theme-container[data-theme='midnight'] { --lofi-background: #0a0c10; /* Darker than default dark theme */ --lofi-card: #141820; /* Deep blue-tinted dark */ --lofi-card-hover: #1c2230; /* Slightly lighter on hover */ --lofi-border: #252d3d; /* Subtle blue-gray border */ --lofi-text-primary: #e2e8f0; /* Soft white with blue tint */ --lofi-text-secondary: #94a3b8; /* Muted blue-gray */ --lofi-button-bg: #252d3d; /* Deep blue-gray */ --lofi-button-hover: #2f3b4f; /* Lighter blue-gray on hover */ --lofi-button-text: #e2e8f0; /* Same as text-primary */ --lofi-accent: #3b82f6; /* Bright blue accent */ --lofi-accent-hover: #60a5fa; /* Lighter blue on hover */ --lofi-card-radius: 0.75rem; --lofi-button-radius: 0.5rem; --lofi-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.02); } .theme-container[data-theme='cyberpunk'] { --lofi-background: #0f0326; /* Deep purple background */ --lofi-card: #1a0940; /* Richer purple for cards */ --lofi-card-hover: #2a0c66; /* Brighter purple on hover */ --lofi-border: #ff2a6d; /* Neon pink border */ --lofi-text-primary: #05ffa1; /* Bright cyan text */ --lofi-text-secondary: #14acc2; /* Muted cyan */ --lofi-button-bg: #2a0c66; /* Deep purple buttons */ --lofi-button-hover: #3d1a75; /* Lighter purple on hover */ --lofi-button-text: #05ffa1; /* Cyan button text */ --lofi-accent: #ff2a6d; /* Neon pink accent */ --lofi-accent-hover: #ff4081; /* Lighter pink on hover */ --lofi-card-radius: 0.25rem; /* Sharp corners for cyber feel */ --lofi-button-radius: 0rem; /* Square buttons */ --lofi-card-shadow: 0 0 10px rgba(255, 42, 109, 0.3), 0 0 20px rgba(5, 255, 161, 0.1), inset 0 0 2px rgba(255, 42, 109, 0.5); } .theme-container[data-theme='forest'] { --lofi-background: #1a2f1c; /* Deep forest green */ --lofi-card: #2a412c; /* Darker green for cards */ --lofi-card-hover: #35513e; /* Lighter green on hover */ --lofi-border: #4a6b4d; /* Muted green border */ --lofi-text-primary: #d4e5d4; /* Soft green-white */ --lofi-text-secondary: #95ab96; /* Muted sage */ --lofi-button-bg: #3c5a3e; /* Forest green buttons */ --lofi-button-hover: #4a714d; /* Lighter green on hover */ --lofi-button-text: #d4e5d4; /* Light text */ --lofi-accent: #7fb069; /* Moss green accent */ --lofi-accent-hover: #96c37c; /* Lighter moss on hover */ --lofi-card-radius: 1.5rem; /* Organic, rounded corners */ --lofi-button-radius: 1rem; /* Soft buttons */ --lofi-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(126, 176, 105, 0.1), inset 0 1px 0 0 rgba(212, 229, 212, 0.05); } .theme-container[data-theme='ocean'] { --lofi-background: #0a192f; /* Deep ocean blue */ --lofi-card: #112240; /* Darker blue for cards */ --lofi-card-hover: #1a365d; /* Lighter blue on hover */ --lofi-border: #234876; /* Medium blue border */ --lofi-text-primary: #e6f1ff; /* Soft blue-white */ --lofi-text-secondary: #8892b0; /* Muted blue-gray */ --lofi-button-bg: #1a365d; /* Ocean blue buttons */ --lofi-button-hover: #234876; /* Lighter blue on hover */ --lofi-button-text: #e6f1ff; /* Light text */ --lofi-accent: #64ffda; /* Aqua accent */ --lofi-accent-hover: #88fff0; /* Lighter aqua on hover */ --lofi-card-radius: 0.5rem; /* Gentle waves */ --lofi-button-radius: 0.25rem; /* Subtle curves */ --lofi-card-shadow: 0 4px 15px rgba(100, 255, 218, 0.07), 0 0 0 1px rgba(100, 255, 218, 0.1), inset 0 1px 0 0 rgba(230, 241, 255, 0.05); } .theme-container[data-theme='sunset'] { --lofi-background: #2d1b2d; /* Deep purple-red */ --lofi-card: #3d2438; /* Darker mauve for cards */ --lofi-card-hover: #4d2d47; /* Lighter mauve on hover */ --lofi-border: #ff6b6b; /* Coral border */ --lofi-text-primary: #ffd6d6; /* Soft pink-white */ --lofi-text-secondary: #c4a5a5; /* Muted pink */ --lofi-button-bg: #ff6b6b; /* Coral buttons */ --lofi-button-hover: #ff8787; /* Lighter coral on hover */ --lofi-button-text: #2d1b2d; /* Dark text on buttons */ --lofi-accent: #ffc145; /* Golden accent */ --lofi-accent-hover: #ffd175; /* Lighter gold on hover */ --lofi-card-radius: 1rem; /* Soft corners */ --lofi-button-radius: 0.75rem; /* Rounded buttons */ --lofi-card-shadow: 0 4px 12px rgba(255, 107, 107, 0.1), 0 0 0 1px rgba(255, 107, 107, 0.1), inset 0 1px 0 0 rgba(255, 214, 214, 0.05); }