/* ============================================================ THEME FOUNDATION – Light & Dark Palettes ============================================================ */ /* Base color scheme – enforce light to stop OS forced dark mode */ :root { color-scheme: light; -webkit-text-size-adjust: 100%; forced-color-adjust: none; /* Light theme palette */ --bg-body: #ffffff; --bg-section: #F7F9FC; --bg-card: #ffffff; --color-primary: #0056D6; --color-accent: #FF6A00; --color-text: #222222; --color-border: #E5E7EB; } /* Dark theme overrides – applied when .dark-theme is present on */ html.dark-theme { --bg-body: #0B1120; --bg-section: #0B1120; /* reuse background for sections */ --bg-card: #111827; --color-primary: #2563EB; --color-accent: #F97316; --color-text: #F8FAFC; --color-border: #334155; } /* Ensure all elements have explicit colours */ body { background: var(--bg-body) !important; color: var(--color-text) !important; } header, nav, .hero, section, .card, button, a, svg, form, footer, .modal, .dropdown, .table, .accordion, .popup { background: inherit; color: inherit; border-color: var(--color-border) !important; } /* Prevent automatic image inversion in dark mode */ img, picture, svg { filter: none !important; } /* Smooth theme transition */ html { transition: background-color 0.3s ease, color 0.3s ease; }