/* theme.css — day-mode overrides. Toggled via [data-theme="day"] on . */ :root[data-theme="day"] { --black: #f0ece4; --dark: #e6e1d8; --ink: #0a0a0a; --muted: rgba(10, 10, 10, .62); --muted2: rgba(10, 10, 10, .42); --line: rgba(10, 10, 10, .1); --panel: rgba(10, 10, 10, .05); /* darken teal so it reads on the cream background (~6:1 contrast) */ --orange: #005f6c; --orange2: #007a8a; } [data-theme="day"] body { background: radial-gradient(circle at top right, rgba(0, 100, 115, .07), transparent 30%), #f0ece4; color: #0a0a0a; } [data-theme="day"] nav { background: rgba(240, 236, 228, .94); } [data-theme="day"] .nav-links a { color: rgba(10, 10, 10, .62); } [data-theme="day"] .nav-links a:hover, [data-theme="day"] .nav-links a.is-active { color: #0a0a0a; } [data-theme="day"] .btn-secondary { border-color: rgba(10, 10, 10, .2); color: #0a0a0a; } [data-theme="day"] .btn-secondary:hover { border-color: var(--orange); color: var(--orange); } [data-theme="day"] .panel { background: linear-gradient(180deg, rgba(10, 10, 10, .04), rgba(10, 10, 10, .02)); } [data-theme="day"] .field { background: rgba(10, 10, 10, .06); border-color: rgba(10, 10, 10, .15); color: #0a0a0a; } [data-theme="day"] .field::placeholder { color: rgba(10, 10, 10, .42); } [data-theme="day"] .footer-links a { color: rgba(10, 10, 10, .62); } [data-theme="day"] .footer-links a:hover { color: #0a0a0a; } [data-theme="day"] .page-mascot, [data-theme="day"] .hero-mascot-main, [data-theme="day"] .section-mascot, [data-theme="day"] .process-mascot { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .18)); }