/* * Fish Translator — Light Mode Override * Activated when is set. * Non-breaking: if not loaded, dark mode persists. * * WCAG AA target: body text >= 4.5:1, large text >= 3:1. * Cool-cream backdrop (#f4f8fa) pairs with deep teal-slate text (#0f2942). */ [data-theme="light"] { /* Backgrounds (invert deep blues to cool cream) */ --deep: #f4f8fa; --mid: #e8eef4; --surface: #f9fcfe; --card: rgba(255, 255, 255, 0.9); --card-border: rgba(15, 41, 66, 0.12); /* Text (dark teal-slate for contrast on cream) */ --text: #0f2942; --muted: #3b5066; --dim: #5a7088; /* Accents (kept vibrant but 10-15% darker for contrast) */ --teal: #0694a8; /* darkened from #06b6d4 */ --cyan: #0ea5bd; /* darkened from #22d3ee */ --light-cyan: #32a4b8; --gold: #b78a2a; /* slightly darker brass */ --green: #059669; --red: #dc2626; } /* Body bg + text */ [data-theme="light"] body { background: var(--deep) !important; color: var(--text) !important; } /* Nav / header panels */ [data-theme="light"] .cam-tag, [data-theme="light"] .nav, [data-theme="light"] .navbar, [data-theme="light"] .site-header, [data-theme="light"] header { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(15, 41, 66, 0.15) !important; color: var(--text) !important; } /* Cards and tiles */ [data-theme="light"] .card, [data-theme="light"] .tile, [data-theme="light"] .panel, [data-theme="light"] .widget, [data-theme="light"] .species-tile, [data-theme="light"] [class*="-card"], [data-theme="light"] [class*="-tile"] { background: var(--card) !important; border-color: var(--card-border) !important; color: var(--text) !important; box-shadow: 0 2px 8px rgba(15, 41, 66, 0.08); } /* Inputs */ [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: #ffffff !important; color: var(--text) !important; border-color: rgba(15, 41, 66, 0.25) !important; } /* Buttons keep accent but with white text (primary CTA unchanged from dark) */ [data-theme="light"] .btn-primary, [data-theme="light"] button.primary, [data-theme="light"] .primary-btn { background: var(--teal) !important; color: #ffffff !important; border-color: var(--teal) !important; } /* Fade the deep bg overlay (live-cam background is too dark against cream) */ [data-theme="light"] .cam-bg::after { background: linear-gradient(180deg, rgba(244, 248, 250, 0.35) 0%, rgba(244, 248, 250, 0.15) 30%, rgba(244, 248, 250, 0.35) 70%, rgba(244, 248, 250, 0.65) 100%) !important; } /* Text utilities */ [data-theme="light"] .text-muted, [data-theme="light"] .muted, [data-theme="light"] .dim { color: var(--muted) !important; } /* Links */ [data-theme="light"] a:not(.btn):not(.btn-primary) { color: var(--teal); } [data-theme="light"] a:hover { color: var(--cyan); } /* Borders that used white on dark */ [data-theme="light"] [style*="border-color: rgba(255"], [data-theme="light"] hr { border-color: rgba(15, 41, 66, 0.15) !important; } /* Meta — announce theme change for screen readers via aria-live container */ [data-theme="light"] [data-theme-announce] { color: var(--muted); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { [data-theme="light"] * { transition: none !important; } }