/* ============================================================= Medichive — theme layer Loaded by EVERY page, after home.css. Dark is the site default. `html.theme-dark` is set by the inline snippet in each page's and toggled by js/theme.js, which remembers the choice in localStorage. home.css defines its whole palette as custom properties on :root, so re-theming is mostly a matter of redefining those tokens. `html.theme-dark` is the same element as :root but wins on specificity, so every component inherits the dark values without touching home.css — which the other six pages still use unchanged. Below the token block are the handful of components that hold a hardcoded colour and therefore need an explicit fix. ============================================================= */ html.theme-dark { color-scheme: dark; /* surfaces — derived from the logo navy #05386B */ --bg: #06172B; --surface: #0B2542; --surface-2: #0E2C4E; --tint: #10314F; --tint-strong: #163A5C; /* ink */ --ink: #E8F1F8; --ink-soft: #C9DCEB; --body: #A8BFD4; --muted: #7E9AB4; --faint: #5E7C99; /* lines */ --border: rgba(140, 190, 225, 0.16); --border-strong: rgba(140, 190, 225, 0.30); /* brand greens — lifted, because #11875A goes muddy on a dark ground */ --accent: #4FD69A; --accent-deep: #5CDB95; --accent-bright: #7FE8AE; --accent-wash: rgba(92, 219, 149, 0.14); --accent-wash-2: rgba(92, 219, 149, 0.24); /* navy */ --navy: #1B4674; --navy-deep: #102D4E; /* AI accent */ --ai: #5B96F5; --ai-deep: #3B82F6; --ai-bright: #7FB0FF; --ai-wash: rgba(91, 150, 245, 0.14); /* deep chrome — the green-filled bands */ --green-900: #0A5F3E; --green-850: #0C734C; --green-800: #0E855A; --on-green: #EAFBF3; --on-green-dim: #B6E3CE; --on-green-faint: #7FC5A4; /* status */ --rose: #F26B8A; --rose-wash: rgba(242, 107, 138, 0.14); --amber: #E9A83E; --amber-wash: rgba(233, 168, 62, 0.14); --glow: rgba(92, 219, 149, 0.30); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 12px -6px rgba(0, 0, 0, 0.6); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px -22px rgba(0, 0, 0, 0.8); --shadow-float: 0 40px 90px -45px rgba(0, 0, 0, 0.9); } /* ------------------------------------------------------------- Components carrying a hardcoded colour ------------------------------------------------------------- */ /* white card/chip fills */ .theme-dark .card, .theme-dark .pill, .theme-dark .xt-card, .theme-dark .xt-pick { background-color: var(--surface); } /* primary button: green fill needs dark ink, not white — and the light theme's glow is far too hot against a dark ground */ .theme-dark .btn-primary { color: #04281B; box-shadow: 0 10px 24px -16px var(--accent); } .theme-dark .btn-primary:hover { color: #04281B; box-shadow: 0 14px 30px -18px var(--accent); } /* Segmented controls: the selected pill fills with var(--ink) and hardcodes a white label. In dark mode --ink is near-white, so the label disappears into its own pill. Give it dark ink instead — and the .aud variant fills with the bright accent, where white is barely legible either. */ .theme-dark .seg button[aria-pressed="true"] { color: #06172B; } .theme-dark .seg.aud button[aria-pressed="true"] { color: #04281B; } /* floating back-to-top is filled with var(--ink) — a white disc in dark mode */ .theme-dark .to-top { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); } .theme-dark .to-top:hover { background: var(--accent-deep); color: #04281B; } /* the nav is a translucent white sheet in light mode */ .theme-dark .nav { background: rgba(6, 23, 43, 0.80); } .theme-dark .nav-menu, .theme-dark .dd-menu { background: var(--surface); border-color: var(--border); } .theme-dark .subnav { background: rgba(6, 23, 43, 0.86); } /* mock browser chrome dots read as traffic lights on white only */ .theme-dark .bar { background: var(--surface-2); } /* footer sits on its own darker ground */ .theme-dark .footer { background: #04101F; border-top: 1px solid var(--border); } /* form fields */ .theme-dark input, .theme-dark textarea, .theme-dark select { background: var(--surface-2); color: var(--ink); border-color: var(--border); } .theme-dark input::placeholder, .theme-dark textarea::placeholder { color: var(--faint); } /* images that were drawn for a light ground */ .theme-dark .badges img, .theme-dark .store-badge img { filter: none; } /* selection */ .theme-dark ::selection { background: var(--accent-wash-2); color: var(--ink); } /* ------------------------------------------------------------- The toggle itself — styled for both themes, since it appears in both. Shows the mode you would switch TO: a sun while dark, a moon while light. ------------------------------------------------------------- */ .theme-toggle { width: 36px; height: 36px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; color: var(--muted); border: 1px solid var(--border); background: transparent; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .theme-toggle:hover { color: var(--ink); border-color: var(--border-strong); background: var(--surface-2); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .ic-sun { display: none; } .theme-dark .theme-toggle .ic-sun { display: block; } .theme-dark .theme-toggle .ic-moon { display: none; }