/* ═══════════════════════════════════════════════ HinSchG-Portal – Theme System (theme.css) Light/Dark mode via data-theme attribute on ═══════════════════════════════════════════════ */ /* ── Light Theme (default) ── */ :root, [data-theme="light"] { --theme-bg: #ffffff; --theme-bg-alt: #f8fafc; --theme-bg-card: #ffffff; --theme-bg-card-alt: #f1f5f9; --theme-bg-hover: #f1f5f9; --theme-bg-input: #ffffff; --theme-bg-nav: rgba(255,255,255,0.95); --theme-bg-hero: #f8faff; --theme-border: #e2e8f0; --theme-border-light: #f1f5f9; --theme-border-input: #cbd5e1; --theme-border-focus: #3b82f6; --theme-text: #1e293b; --theme-text-secondary: #475569; --theme-text-muted: #64748b; --theme-text-dimmer: #94a3b8; --theme-text-heading: #0f172a; --theme-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --theme-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); --theme-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); --theme-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); --theme-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); --theme-code-bg: #f1f5f9; --theme-overlay: rgba(0,0,0,0.5); } /* ── Dark Theme ── */ [data-theme="dark"] { --theme-bg: #050a18; --theme-bg-alt: #0a1020; --theme-bg-card: #0c1425; --theme-bg-card-alt: #111c32; --theme-bg-hover: #162240; --theme-bg-input: #0a1020; --theme-bg-nav: rgba(5,10,24,0.85); --theme-bg-hero: #050a18; --theme-border: rgba(255,255,255,0.06); --theme-border-light: rgba(255,255,255,0.03); --theme-border-input: rgba(255,255,255,0.12); --theme-border-focus: #3b82f6; --theme-text: #e2e8f0; --theme-text-secondary: #94a3b8; --theme-text-muted: #64748b; --theme-text-dimmer: #475569; --theme-text-heading: #f1f5f9; --theme-shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --theme-shadow: 0 1px 3px rgba(0,0,0,0.4); --theme-shadow-md: 0 4px 6px rgba(0,0,0,0.4); --theme-shadow-lg: 0 10px 20px rgba(0,0,0,0.5); --theme-shadow-xl: 0 20px 40px rgba(0,0,0,0.6); --theme-code-bg: #111c32; --theme-overlay: rgba(0,0,0,0.7); color-scheme: dark; } /* ── Theme Toggle Button ── */ .theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid var(--theme-border); border-radius: 8px; cursor: pointer; color: var(--theme-text-muted); transition: all 0.2s; flex-shrink: 0; } .theme-toggle:hover { background: var(--theme-bg-hover); color: var(--theme-text); border-color: var(--theme-border-input); } .theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; transition: all 0.3s ease; } [data-theme="light"] .theme-toggle .icon-sun, :root:not([data-theme]) .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="light"] .theme-toggle .icon-moon, :root:not([data-theme]) .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); } [data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); } [data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } /* ── Smooth transition on theme change ── */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; transition-delay: 0s !important; }