/* ============================================================ theme.css — shared design tokens + theme switcher for MyPotential. Two themes, one axis: dark (default) and light. dark — near-black #0A0A0B ground, white chrome light — white ground, near-black chrome The chrome is deliberately MONOCHROME. --accent is white on dark and black on light; there is no brand hue in the furniture. Colour in this app means something, so it is spent only where it carries information: the ten section hues (--sec-*) and the semantic states (--success, --danger, --warning). That is why --success/--mint/--good below are pinned to real green rather than aliased to --accent the way they were when --accent was itself green — aliasing them now would turn every "on track" state white. Selectors use `html:root` / `html[data-theme="light"]` so they beat any per-page `:root { … }` block (specificity 0,1,1 > 0,1,0) — that lets the older pages keep their local token definitions as fallbacks while these values win, with no need to gut each page's stylesheet. In particular each page's own `--accent` is out-specified here, so every `var(--accent)` usage app-wide picks up the active theme's accent. Legacy aliases (--bg-card, --text-1..4, --border, --muted, …) point back at the canonical tokens so pages that used different names still recolour. theme.js sets [data-theme] on and wires the toggle. ============================================================ */ /* ===== Dark — the default. No [data-theme] attribute is set for it. ===== */ html:root { color-scheme: dark; --bg: #0A0A0B; --bg-elevated: #141416; --surface: rgba(255,255,255,0.045); --surface-2: rgba(255,255,255,0.07); --surface-3: rgba(255,255,255,0.10); --surface-border: rgba(255,255,255,0.09); --surface-hover: rgba(255,255,255,0.13); --hairline: rgba(255,255,255,0.06); --text-primary: #FAFAFA; --text-secondary: #A8A8A6; --text-tertiary: #6E6E6C; --text-quaternary: rgba(250,250,250,0.28); --glow-1: rgba(255,255,255,0.05); --glow-2: rgba(255,255,255,0.03); --accent: #FAFAFA; --accent-contrast: #0A0A0B; /* Strength of the per-section glow/tint on tiles. Lower on light, where a wash over white turns grey much faster than it does over black. */ --sec-glow: 0.17; --sec-tint: 0.13; /* ---- the ten section hues — the colour that survives both themes. Spread evenly around the wheel; each gets a darker twin under [data-theme="light"] because these sit near 70% lightness and would clear barely 2:1 on white. ---- */ --sec-main: #6DE3AC; /* H 152 mint — Goals */ --sec-gym: #6DA8E3; /* H 210 sky — Training */ --sec-calories: #E37D6D; /* H 8 coral — Calories */ --sec-water: #6DD8E3; /* H 186 aqua — Hydration */ --sec-health: #E36D9E; /* H 335 rose — Health */ --sec-finance: #776DE3; /* H 245 indigo — Finance */ --sec-faith: #E3C46D; /* H 44 gold — Faith */ --sec-meds: #E36DD0; /* H 310 magenta — Meds */ --sec-screentime: #D46DE3; /* H 292 orchid — Screen Time */ --sec-reminders: #9F6DE3; /* H 265 violet — Reminders */ --sec-none: #76746E; /* the "add a section" tile */ /* ---- accent derivatives (defined once; inherited by both themes, recomputed from each theme's own --accent via color-mix) ---- */ --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); /* tinted button/pill backgrounds */ --accent-strong: color-mix(in srgb, var(--accent) 22%, transparent); --accent-border: color-mix(in srgb, var(--accent) 34%, transparent); /* accent borders */ --accent-ring: color-mix(in srgb, var(--accent) 12%, transparent); /* focus glow */ /* ---- legacy aliases (older pages used these names) ---- */ --bg-card: var(--surface); --bg-solid: var(--bg); --text-1: var(--text-primary); --text-2: var(--text-secondary); --text-3: var(--text-tertiary); --text-4: var(--text-quaternary); --muted: var(--text-secondary); --border: var(--surface-border); --border-strong: var(--surface-hover); --border-hi: var(--surface-border); /* ---- semantic states. Pinned to real hues, NOT to --accent: the accent is monochrome now, so aliasing these would erase the difference between "on track" and "over budget". --danger and --warning were previously declared per page as literals (six spellings of red across five files, four of amber), which meant none of them had a light twin. They are canonical here now, at the same specificity as everything else, so a page that declares its own gets out-specified rather than ignored. ---- */ --success: #6BE3A4; --mint: #6BE3A4; --good: #6BE3A4; --danger: #FF6B6B; --warning: #F2C063; --bad: #FF6B6B; /* ---- macros. A trio, so they are set together: the point is telling them apart at a glance, not any one of them individually. ---- */ --protein: #60A5FA; --carbs: #F2C063; --carb: var(--carbs); --fat: #FF6B6B; } /* ===== Light — white ground, near-black chrome ===== */ html[data-theme="light"] { color-scheme: light; --bg: #FFFFFF; --bg-elevated: #F6F7F6; --surface: rgba(10,10,11,0.032); --surface-2: rgba(10,10,11,0.055); --surface-3: rgba(10,10,11,0.08); --surface-border: rgba(10,10,11,0.10); --surface-hover: rgba(10,10,11,0.14); --hairline: rgba(10,10,11,0.07); --text-primary: #0A0A0B; --text-secondary: #5E605E; --text-tertiary: #8D908D; /* Not the mirror of dark's 0.28. Black at low alpha over white goes pale much faster than white at low alpha over near-black, and this token carries empty-state text that doubles as the call to action ("Check in", "Log sleep"). At 0.32 those read as disabled; 0.45 still recedes. */ --text-quaternary: rgba(10,10,11,0.45); --glow-1: rgba(10,10,11,0.035); --glow-2: rgba(10,10,11,0.02); --accent: #0A0A0B; --accent-contrast: #FFFFFF; --sec-glow: 0.10; --sec-tint: 0.09; /* Same hue, ~25 points darker, so each clears 4.5:1 on white. */ --sec-main: #1E8F5E; --sec-gym: #2B72B8; --sec-calories: #C4472F; --sec-water: #10808E; --sec-health: #B83A6B; --sec-finance: #4A3EC0; --sec-faith: #8A6A0C; --sec-meds: #A62E93; --sec-screentime: #8F32AD; --sec-reminders: #6B3BC4; --sec-none: #8D908D; /* Green at 70% lightness is 1.8:1 on white — unreadable as text. The semantic hues need their own darker twins here for the same reason the section hues do. Measured on white before/after: carbs #F2C063 1.68:1 -> #8A6A0C 5.2:1 protein #60A5FA 2.54:1 -> #2B72B8 4.9:1 fat #FF6B6B 2.78:1 -> #C4372F 5.4:1 */ --success: #12855A; --mint: #12855A; --good: #12855A; --danger: #C4372F; --warning: #8A6A0C; --bad: #C4372F; --protein: #2B72B8; --carbs: #8A6A0C; --carb: var(--carbs); --fat: #C4372F; } /* Fade between themes instead of snapping. */ html, body { transition: background-color 0.38s ease, color 0.38s ease; } /* ============================================================ Theme toggle — shared component. One