/* ======================================================================= theme.css — LIGHT / DARK THEME OVERRIDES ======================================================================= PURPOSE ----------------------------------------------------------------------- - Handles theme switching (light ↔ dark) - Overrides ONLY colors, shadows, and contrasts - Does NOT control layout or structure IMPORTANT RULES ----------------------------------------------------------------------- - ❌ DO NOT add layout styles here - ❌ DO NOT add components (cards, grids, nav) - ✔ Use CSS variables defined in global.css - ✔ This file should stay SMALL & SAFE FILE RELATIONSHIP ----------------------------------------------------------------------- global.css → base variables & layout header.css → header structure & layout footer.css → footer styles theme.css → theme color overrides (THIS FILE) ======================================================================= */ /* ======================================================================= DEFAULT THEME (LIGHT) ----------------------------------------------------------------------- Light theme is defined in :root (global.css) This section exists for future clarity only. ======================================================================= */ /* (Intentionally empty — base light theme lives in global.css) */ /* ======================================================================= DARK THEME OVERRIDES ----------------------------------------------------------------------- Activated when is set ======================================================================= */ [data-theme="dark"] { /* Text & background refinements */ --bg: #0b0b10; --card: #0f1115; --text: #e8e6ef; --muted: #9a94a8; /* Subtle transparency adjustments */ --glass: rgba(255,255,255,0.04); /* Shadow depth for dark surfaces */ --shadow-1: 0 6px 20px rgba(0,0,0,0.5); } /* ======================================================================= DARK MODE GLOBAL POLISH ----------------------------------------------------------------------- Small visual improvements that do NOT affect layout ======================================================================= */ /* Reduce excessive glow on cards in dark mode */ [data-theme="dark"] .card:hover { box-shadow: 0 14px 36px rgba(0,0,0,0.65); } /* Improve readability for muted text */ [data-theme="dark"] .meta { color: #a6a0b8; } /* ======================================================================= THEME TOGGLE ICON SUPPORT (OPTIONAL) ----------------------------------------------------------------------- If you later add an icon (🌙 / ☀️) inside the button, these helpers are already prepared. ======================================================================= */ .theme-toggle::before { content: ""; } /* Example (disabled by default): [data-theme="dark"] .theme-toggle::before { content: "☀️"; } :not([data-theme="dark"]) .theme-toggle::before { content: "🌙"; } */