/** * theme.css — Light and Dark Mode Variable Sets * * Applied via [data-theme="light"] and [data-theme="dark"] on . * Injected before body renders to prevent flash of incorrect theme. */ /* ── Light Theme ─────────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { --color-bg: #ffffff; --color-bg-alt: #f8f8f5; --color-bg-elevated: #f2f2ef; --color-surface: #ffffff; --color-surface-alt: #f5f5f2; --color-border: #e2e2de; --color-border-strong: #c8c8c4; --color-text-primary: #0d0d0a; --color-text-secondary: #4a4a46; --color-text-muted: #6b6b66; --color-text-disabled: #a0a09c; --color-text-inverse: #ffffff; --color-accent: #C9A84C; --color-accent-hover: #A8873A; --color-accent-light: rgba(201,168,76,0.10); --color-accent-medium: rgba(201,168,76,0.20); --color-error: #dc2626; --color-error-bg: #fef2f2; --color-success: #16a34a; --color-success-bg: #f0fdf4; --color-warning: #d97706; --color-warning-bg: #fffbeb; --color-nav-bg: rgba(255,255,255,0.92); --color-nav-border: rgba(0,0,0,0.06); --color-card-bg: #ffffff; --color-card-border: rgba(0,0,0,0.06); --color-input-bg: #ffffff; --color-input-border: #d4d4d0; --color-input-focus: #C9A84C; --color-input-bg-focus: #fcfcfc; --color-overlay: rgba(255,255,255,0.9); --color-hero-overlay: linear-gradient(135deg, rgba(13,13,10,0.7) 0%, rgba(13,13,10,0.3) 100%); --color-section-alt: #f8f8f5; --shadow-card: var(--shadow-sm); --shadow-card-hover: var(--shadow-lg); --shadow-nav: 0 1px 0 var(--color-nav-border), 0 4px 16px rgba(0,0,0,0.04); --hero-blend: multiply; --hero-text: #ffffff; --hero-subtext: rgba(255,255,255,0.7); } /* ── Dark Theme ──────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --color-bg: #0a0a08; --color-bg-alt: #111110; --color-bg-elevated: #1a1a18; --color-surface: #141412; --color-surface-alt: #1e1e1c; --color-border: #2a2a28; --color-border-strong: #3a3a38; --color-text-primary: #f0f0ec; --color-text-secondary: #c8c8c4; --color-text-muted: #8a8a86; --color-text-disabled: #5a5a56; --color-text-inverse: #0d0d0a; --color-accent: #C9A84C; --color-accent-hover: #E8C96B; --color-accent-light: rgba(201,168,76,0.12); --color-accent-medium: rgba(201,168,76,0.22); --color-error: #ef4444; --color-error-bg: rgba(220,38,38,0.12); --color-success: #22c55e; --color-success-bg: rgba(22,163,74,0.12); --color-warning: #f59e0b; --color-warning-bg: rgba(217,119,6,0.12); --color-nav-bg: rgba(10,10,8,0.92); --color-nav-border: rgba(255,255,255,0.06); --color-card-bg: #141412; --color-card-border: rgba(255,255,255,0.06); --color-input-bg: #1e1e1c; --color-input-border: #3a3a38; --color-input-focus: #C9A84C; --color-input-bg-focus: #252522; --color-overlay: rgba(10,10,8,0.9); --color-hero-overlay: linear-gradient(135deg, rgba(5,5,3,0.85) 0%, rgba(5,5,3,0.55) 100%); --color-section-alt: #111110; --shadow-card: 0 1px 4px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2); --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3); --shadow-nav: 0 1px 0 var(--color-nav-border), 0 4px 16px rgba(0,0,0,0.2); --hero-blend: normal; --hero-text: #f0f0ec; --hero-subtext: rgba(255,255,255,0.6); } /* ── Theme Transition ────────────────────────────────────────────────────────── */ body { transition: background-color var(--transition-normal), color var(--transition-fast); } .card, .nav, .btn, .footer, .section-alt, .contact-form-card { transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-fast), box-shadow var(--transition-normal), transform var(--transition-normal); } /* Exclude transitions for theme script execution (avoid FOUC) */ .theme-switching, .theme-switching * { transition: none !important; } /* ── Theme Toggle Button Redesign ─────────────────────────────────────────────── */ .theme-toggle { position: relative; width: 42px; height: 42px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; overflow: hidden; transition: all var(--transition-normal); } .theme-toggle:hover { background: var(--color-accent-light); color: var(--color-accent); border-color: var(--color-accent); transform: translateY(-2px); } .theme-toggle svg { position: absolute; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease; } /* Logic: Show what will BE applied */ /* In LIGHT mode: Show MOON icon (to switch to dark) */ [data-theme="light"] .theme-toggle .icon-sun { opacity: 0; transform: translateY(20px) rotate(45deg); } [data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: translateY(0) rotate(0deg); } /* In DARK mode: Show SUN icon (to switch to light) */ [data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: translateY(0) rotate(0deg); } [data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: translateY(-20px) rotate(-45deg); } /* Contrast adjustment for Hero (which is always dark area) */ .hero .theme-toggle { border-color: rgba(255,255,255,0.2); color: #ffffff; } .hero .theme-toggle:hover { background: rgba(255,255,255,0.1); border-color: #ffffff; }