/* Theme system — dark by default, a persisted light mode that keeps the same hierarchy. Loaded AFTER style.css / ui.css (and after any page's own inline :root) on every page that carries a theme toggle. Specificity, not source order, makes the overrides below win: `:root[data-theme="light"]` (a pseudo-class plus an attribute selector) always beats a page's own bare `:root`, no matter which stylesheet came first. js/theme.js sets data-theme on before first paint. */ :root { /* Semantic colors. Always paired with a label or icon, never color alone. Lime marks the one primary action, a selected state, or completed progress — nothing else uses it as a status color. */ --c-action: #C4D824; /* primary action, selected, complete */ --c-good: #4ADE80; /* positive, beginner */ --c-attn: #F0A431; /* attention, active work */ --c-risk: #F0524B; /* overdue, urgent, high risk */ --c-money: #F2C94C; /* money or nutrition */ --c-info: #5BA8F5; /* forms, recovery, needs review */ --c-coach: #B18CF2; /* mobility or coaching */ } :root[data-theme="light"] { /* Semantic colors, darkened for 4.5:1+ contrast on a white or off-white surface. Lime itself never changes as a FILL (a lime button keeps #C4D824 with black text in both themes) — this darker value is only for lime used as text or an icon, where raw #C4D824 fails contrast on white. */ --c-action: #5A650E; --c-good: #1E8E4A; --c-attn: #B8650A; --c-risk: #C8322B; --c-money: #9A7400; --c-info: #1F6FC4; --c-coach: #7A4FC9; /* ── css/style.css tokens (public site) ─────────────────────────────── */ --black: #F4F4F1; /* page background */ --sunken: #ECECE7; /* wells: inset fields, tracks */ --dark: #FFFFFF; /* cards, list rows */ --card: #FFFFFF; /* legacy alias of --dark */ --raised: #FFFFFF; /* nested content on a card */ --elevated: #FFFFFF; /* modals, sheets, popovers */ --border: #DADAD3; --border-strong:#C7C7BE; --white: #0A0A0A; /* primary ink (var name kept for compatibility) */ --text-2: #2B2B27; /* supporting body copy */ --gray-light: #2B2B27; /* legacy alias of --text-2 */ --gray: #5E5E56; /* captions and metadata only */ --muted: #5E5E56; /* quiet links and subtitles */ --muted-dark: #A6A69C; /* disabled only */ --ok: #1E8E4A; --warn: #B8650A; --danger: #C8322B; /* ── css/ui.css tokens (console / player / parent / auth chrome) ────── */ --sm-bg: #F4F4F1; --sm-card: #FFFFFF; --sm-card-2: #ECECE7; --sm-elevated: #FFFFFF; --sm-text: #0A0A0A; --sm-muted: #4A4A45; --sm-muted-dk: #A6A69C; --sm-border: #DADAD3; --sm-border-lt: #C7C7BE; --sm-ok: #1E8E4A; --sm-warn: #B8650A; --sm-danger: #C8322B; /* ── auth.html's own :root set ───────────────────────────────────────── */ --bg: #F4F4F1; --surface: #FFFFFF; --surface2: #ECECE7; --text: #0A0A0A; --text-dim: rgba(10,10,10,0.45); --text-mid: rgba(10,10,10,0.75); --error: #C8322B; --accent-dim: rgba(143,160,26,0.12); --accent-border:rgba(143,160,26,0.35); --overlay-1: rgba(10,10,10,0.06); /* --accent is deliberately absent here too: lime stays rgb(196,216,36) in both themes. --border is the same #DADAD3 hairline used above for style.css — the name means the same thing (a hairline) on every page that defines it, even though each page's dark starting value differs. */ /* ── coach-console.html / trainer-console.html's own :root set ──────── */ /* Identical names and dark values on both pages, so one override serves both. --accent is deliberately absent: lime stays #c4d824 in both themes. */ --panel: #FFFFFF; --panel2: #ECECE7; --line: #DADAD3; --line2: #C7C7BE; --dim: #A6A69C; } /* ── Theme toggle ────────────────────────────────────────────────────── One shared control used in the public nav, the public mobile menu, auth.html, the console's account menu and the trainer console topbar. [data-theme-toggle] carries aria-pressed / aria-label updated by js/theme.js; [data-theme-label] is the visible text shown where the control has room (mobile menu, console menu, trainer topbar). */ [data-theme-toggle] { display: inline-flex; align-items: center; gap: 8px; } [data-theme-toggle] .ti-sun, [data-theme-toggle] .ti-moon { display: block; flex: none; } [data-theme-toggle] .ti-sun { display: none; } :root[data-theme="light"] [data-theme-toggle] .ti-moon { display: none; } :root[data-theme="light"] [data-theme-toggle] .ti-sun { display: block; } /* Public nav + mobile menu placement. Both bars stay permanently dark (see the note by .navbar in css/style.css — the wordmark image has no dark-text variant), so these are fixed light-on-dark colors, not theme tokens. */ .nav-theme-toggle { background: none; border: none; cursor: pointer; padding: 6px; color: #A8A8A8; transition: color 0.2s; } .nav-theme-toggle:hover { color: #C4D824; } .mobile-menu .theme-toggle-mobile { width: 100%; background: none; border: none; cursor: pointer; color: #fff; font-family: 'Jakarta',sans-serif; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; text-align: left; padding: 0.85rem 0.25rem; border-bottom: 1px solid rgba(255,255,255,0.07); } .mobile-menu .theme-toggle-mobile:hover { color: #C4D824; } /* The wordmark image (console topbar and sign-in gate) is white lettering with no dark-text variant. Rather than darken the whole bar or card it sits on — which would look broken once the rest of the page goes light — it gets its own small, fixed-dark chip, the same idea as the public nav staying dark, scoped tightly to just the logo. */ .brand-mark-chip { display: inline-flex; align-items: center; background: #0A0A0A; padding: 5px 9px; border-radius: 6px; }