/* ========================================================================== ZURI Theme Tokens -------------------------------------------------------------------------- Single source of truth for the ZURI palette. Every colour referenced in coach.html and client.html should resolve through one of these tokens. Two themes: dark (default) and light. Theme is selected via the data-theme attribute on the element. A small inline script in each HTML file reads localStorage('zuri_theme') BEFORE first paint and sets the attribute, so light-mode users don't see a dark flash on load. Adding a new colour? Pick the closest existing token first. Only add a new token if the role is genuinely distinct from everything below. ========================================================================== */ :root, :root[data-theme="dark"] { /* Backgrounds — warm near-black, not pure #000. Off-pure for atmosphere without losing the dark register. */ --bg: #0a0a0c; /* Page background */ --bg-elevated: #15151a; /* Modals, popups, drawers, dropdowns */ /* Surfaces — solid (Whoop-pattern). Cards step up from --bg via a clearly distinct elevated grey. Hierarchy comes from elevation, not from hairline borders. Was previously translucent rgba — now solid. */ --surface: #15151a; /* Inputs, textareas, cards */ --surface-subtle: #121217; /* Slight step down from --surface, for set-log thread bg */ --surface-hover: #1a1a20; /* Hover states */ --surface-2: #1f1f24; /* Nested chrome — message bubbles, tags, play buttons, set-log inline backgrounds */ /* Borders — Polish-pass values (post icon/contrast pass). Previously the defaults at #1f1f24 (== surface) were effectively invisible — selected states had nothing to distinguish them from default. Lifted to give active/selected/focus states real presence without becoming heavy. */ --border: #2a2a30; /* Default card / input border (was #1f1f24) */ --border-strong: #38383f; /* Modal borders, dividers (was #2a2a30) */ --border-subtle: #4d4d56; /* Selected/focus border (was #3a3a42) */ /* Text — Polish-pass values. Old muted/faint (#555 / #333) were ~4:1 / ~2.5:1 against bg — passable indoors, failed outdoors / in bright gym lighting. New values target ~5.5:1 (muted) and ~4.4:1 (faint) — readable in daylight while still clearly subordinate to --text and --text-dim. */ --text: #fff; /* Primary */ --text-dim: #c8c8cc; /* Secondary, italic notes, meta (lifted from #aaa for consistency) */ --text-muted: #9a9aa0; /* Small caps labels, helper text (was #555) */ --text-faint: #7a7a82; /* Disabled / very faint hints (was #333) */ /* Brand accent — Polish-pass: more chroma, more whoop-lime feel. #d7ff00 was a yellow-leaning lime; #e5ff32 has more green saturation and reads as punchier without becoming a different colour. */ --accent: #e5ff32; /* Completed, reviewed, own messages, coach videos, RPE */ --accent-soft: rgba(229, 255, 50, 0.08); /* Tinted bg (own message bubbles, hit cells, selected glow) */ --accent-border: rgba(229, 255, 50, 0.22); /* Tinted border (own message bubbles) */ --accent-deep: #3a4a00; /* Dark olive labels on logged set rows */ --accent-glow: 0 0 0 1px var(--accent), 0 0 18px -4px var(--accent); /* DEPRECATED — superseded by --selected-glow for card selection. Kept in case other surfaces still want a lime halo. */ --accent-glow-soft: 0 0 12px -4px var(--accent); /* Available for any state wanting a subtle lime halo. Was used briefly on done-state cards; removed once the DONE pill + lime border were judged enough signal on their own. Kept defined for future use. */ /* Danger / attention (kept identical in both themes — red is universal) */ --danger: #ff4444; /* Unreviewed badges, missed sets, delete */ --danger-soft: rgba(255, 68, 68, 0.08); /* Missed wave cell tint */ --danger-border: rgba(255, 68, 68, 0.3); /* Missed cell border, danger button border */ /* Section colours (kept identical in both themes — semantic anchors) */ --warmup: #ff9500; /* Warm-up section pip, help pencil */ --warmup-soft: rgba(255, 149, 0, 0.06); /* Quick-upload + button bg */ --warmup-border: rgba(255, 149, 0, 0.2); /* Quick-upload + button border */ --training: #c47cff; /* Main "Training" section — purple, sits between warm-up orange and cool-down blue */ --training-soft: rgba(196, 124, 255, 0.08); --training-border: rgba(196, 124, 255, 0.25); /* Selected state — reuses the training purple. Different from --accent (lime/ completed) so "I am interacting with this card right now" and "this card is done" are visually unambiguous, not just intensity-different. Independent token name keeps the semantic intent honest even though it currently resolves to the same hex as --training. */ --selected: #c47cff; --selected-soft: rgba(196, 124, 255, 0.1); /* Dual-stacked glow — tight inner + soft outer atmosphere. The two-shadow stack gives the selected state a "premium" punchy-but-not-loud feel. iOS Safari risk note: more shadows = more chances of the backdrop-filter compositing bug clipping output. The transform: translateZ(0) we apply to `.is-selected` should force both layers into the same compositing pass. If real mobile renders this poorly, fall back to single-layer "loose" option (0 0 22px 0 var(--selected)). */ --selected-glow: 0 0 0 1px var(--selected), 0 0 12px -2px var(--selected), 0 0 28px 2px rgba(196, 124, 255, 0.4); --cooldown: #4da6ff; /* Cool-down section pip */ /* Feed type colours (Pass 5) — vivid type-pill text + matching unread dot. Messages = teal (deliberately distinct from accent lime to avoid the feed shouting in two greens). Videos = warm red. Both have soft/border variants for backgrounds and borders on tinted elements. */ --feed-message: #00d4b8; /* Vivid teal for new-message unread state */ --feed-message-soft: rgba(0, 212, 184, 0.08); --feed-message-border: rgba(0, 212, 184, 0.3); --feed-video: #ff5e5e; /* Warm red for new-video unread state */ --feed-video-soft: rgba(255, 94, 94, 0.08); --feed-video-border: rgba(255, 94, 94, 0.3); /* Modal backdrop */ --backdrop: rgba(0, 0, 0, 0.85); /* Hero banner overlay — gradient that fades the bottom of the photo into --bg. Used as a layered background on the hero banner so the greeting overlay reads cleanly against the photo. */ --banner-overlay: linear-gradient(180deg, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, 0) 40%, rgba(10, 10, 12, 0.95) 90%, var(--bg) 100% ); } :root[data-theme="light"] { /* Backgrounds — warm off-white page, elevated cards lift via a slightly warmer/whiter tone. Mirrors the dark-mode elevation pattern. */ --bg: #f5f3ee; /* Warm off-white page bg */ --bg-elevated: #fafaf7; /* Modals, popups, drawers — slightly lifted */ /* Surfaces — solid (Whoop-pattern, light parallel). Cards lift from page via a brighter near-white surface. */ --surface: #fdfcf9; /* Inputs, textareas, cards */ --surface-subtle: #efede7; /* Slight step down for set-log thread bg */ --surface-hover: #ebe9e2; /* Hover states — warmer step */ --surface-2: #e8e6df; /* Nested chrome — message bubbles, tags, play buttons */ /* Borders — light grey scale */ --border: #e0ddd4; /* Default card / input border */ --border-strong: #d3d1c7; --border-subtle: #b8b4ab; /* Polish-pass: was #c4c2b8, lifted slightly for selected-state visibility */ /* Text — inverted scale. Polish-pass: muted lifted from #888780 to a darker, more legible grey for daylight reading. Faint similarly lifted so "last completed N days ago" hints stay readable rather than vanishing into the page. */ --text: #1a1a1a; /* Near-black, gentler than pure #000 on white */ --text-dim: #3a3a40; /* Polish-pass: was #5f5e5a, darker for stronger secondary text */ --text-muted: #5e5e64; /* Polish-pass: was #888780, ~6.5:1 contrast on bg */ --text-faint: #8a8a90; /* Polish-pass: was #b4b2a9, ~4.5:1 (WCAG AA large UI) */ /* Brand accent — burnt olive (same family as lime, survives white bg). Light mode keeps olive — pushing toward neon-lime would lose readability against the cream bg. The olive's natural lower luminance means the selected-state glow is more subtle than dark mode but still visible. */ --accent: #5a6b00; --accent-soft: rgba(90, 107, 0, 0.08); /* Slightly higher opacity than dark — needed on white */ --accent-border: rgba(90, 107, 0, 0.3); /* Higher opacity for visible border on white */ --accent-deep: #3a4a00; /* Same as dark — used for tinted text on accent-soft bg */ --accent-glow: 0 0 0 1px var(--accent), 0 0 14px -3px rgba(90, 107, 0, 0.5); /* DEPRECATED — see dark-theme comment. Kept available for non-card lime halos. */ --accent-glow-soft: 0 0 10px -3px rgba(90, 107, 0, 0.4); /* See dark-theme comment — available for future use, no current consumer. */ /* Danger — same red, slightly higher opacity for tints on white */ --danger: #cc3333; /* Slightly darkened for white-bg readability */ --danger-soft: rgba(204, 51, 51, 0.08); --danger-border: rgba(204, 51, 51, 0.3); /* Section colours — kept identical (orange + blue work in both modes) */ --warmup: #c97400; /* Slightly darkened orange for white-bg readability */ --warmup-soft: rgba(201, 116, 0, 0.08); --warmup-border: rgba(201, 116, 0, 0.3); --training: #7b4fb8; /* Darkened purple for white-bg readability */ --training-soft: rgba(123, 79, 184, 0.08); --training-border: rgba(123, 79, 184, 0.3); /* Selected state — see comment on the dark-theme block. */ --selected: #7b4fb8; --selected-soft: rgba(123, 79, 184, 0.1); --selected-glow: 0 0 0 1px var(--selected), 0 0 10px -2px var(--selected), 0 0 22px 2px rgba(123, 79, 184, 0.35); --cooldown: #2c7fd6; /* Slightly darkened blue for white-bg readability */ /* Feed type colours (Pass 5) — slightly darkened for white-bg readability. Same semantic role as dark mode tokens. */ --feed-message: #008e7c; /* Darker teal — readable on warm-white */ --feed-message-soft: rgba(0, 142, 124, 0.1); --feed-message-border: rgba(0, 142, 124, 0.35); --feed-video: #c93d3d; /* Darker red — readable on warm-white */ --feed-video-soft: rgba(201, 61, 61, 0.08); --feed-video-border: rgba(201, 61, 61, 0.3); /* Modal backdrop — semi-transparent dark works in light mode too */ --backdrop: rgba(0, 0, 0, 0.5); /* Lighter than dark theme — white page peeks through nicely */ /* Hero banner overlay — fades the bottom of the photo into --bg. Heavier opacity than dark mode because the photo is being faded into a near-white page rather than near-black. */ --banner-overlay: linear-gradient(180deg, rgba(245, 243, 238, 0) 0%, rgba(245, 243, 238, 0) 35%, rgba(245, 243, 238, 0.95) 90%, var(--bg) 100% ); }