/* Default theme = Dark. Themes are selected via (see js/theme.js); each non-default theme overrides these CSS variables below. */ :root { color-scheme: dark; --bg: #0f172a; --surface: #1e293b; --surface-2: #334155; --border: #475569; /* Default accent = charcoal (js/accent.js DEFAULT_ACCENT). The live accent is applied via [data-accent] (pre-paint + the rules near the foot of this file); these are the CSS-level FALLBACKS for when no accent attr is applied (degraded / stale-partial deploy) — kept charcoal so nothing ever flashes the old blue. */ --primary: #374151; --primary-dark: #1f2937; /* Secondary brand accents — a second + third user-pickable accent (js/accent.js, data-secondary / data-tertiary). Defaults form a teal + amber trio with the blue primary; each has a darker hover/active shade. */ --secondary: #14b8a6; --secondary-dark: #0d9488; --tertiary: #f59e0b; --tertiary-dark: #d97706; --text: #f8fafc; --text-secondary: #94a3b8; --danger: #ef4444; --success: #22c55e; --warning: #f59e0b; --radius: 12px; --radius-sm: 8px; /* Full-screen overlay scrim (rest timer / stopwatch) + the faint countdown ring track + the timer phase / pace colours. Themed so the timer and stopwatch follow the app's dark / light / high-contrast style. */ --scrim: rgba(0, 0, 0, 0.78); --ring-track: rgba(255, 255, 255, 0.08); --phase-red: #ef4444; --phase-orange: #f97316; --phase-yellow: #eab308; --phase-green: #22c55e; /* Display face for condensed-caps micro-labels (feat_forge_display_type). --font comes FIRST so a white-label tenant font overrides the display axis too, exactly as it overrides the body; with no tenant font set --font is unset and this resolves to Barlow Semi Condensed. */ --font-display: var(--font, 'Barlow Semi Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); } /* Iron Forge — THE DEFAULT THEME (feat_forge_ember_default_theme, branding addendum §1). Warm forged steel rather than the old blue-slate dark: the forge metaphor was only ever in the copy. Paired with the ember accent, but it is a normal accent-driven theme — pick any accent and it still works (unlike noir/blanc/chroma/sepia, which pin --primary). The --primary fallback here is ember, so a degraded load without [data-accent] still reads as Iron Forge rather than flashing charcoal. */ [data-theme="forge"] { color-scheme: dark; /* Surface ramp. The first cut of this palette stepped by ~10/255 between levels, which made forge the FLATTEST of all three palettes on every boundary — page|card 1.09, card|raised 1.12, card|border 1.31, against dark's 1.22 / 1.41 / 1.93. A DRAWN border was fainter than dark's IMPLIED edge, so hairlines stopped reaching the eye and adjacent panels merged. Since forge is the DEFAULT theme, that was everyone's default experience. (owner 2026-07-21: "everything is the same colour, I can't really see the edges between things".) Now stepped to 1.16 / 1.25 / 1.58 — the midpoint between the original and dark, chosen so forge stays moodier than the other themes while its edges actually read. Any future theme: keep card|border at or above ~1.5, or the hairlines are decorative. (fix_forge_theme_flat_surfaces_and_wheel_edges) */ --bg: #161009; --surface: #271f15; --surface-2: #3b2f1f; --border: #4e3e29; --primary: #e0602a; --primary-dark: #b8461c; --secondary: #14b8a6; --secondary-dark: #0d9488; --tertiary: #f59e0b; --tertiary-dark: #d97706; --text: #f6ede1; --text-secondary: #b6a892; --danger: #ef4444; --success: #22c55e; --warning: #f59e0b; --scrim: rgba(20, 14, 8, 0.86); /* Warm ring track so the timer's unfilled arc sits in the forge palette. */ --ring-track: rgba(224, 96, 42, 0.14); /* Ring phases stay SEMANTIC — the colour encodes time remaining, not the accent (branding addendum §4). Same values as dark. */ --phase-red: #ef4444; --phase-orange: #f97316; --phase-yellow: #eab308; --phase-green: #22c55e; } /* Surfaces sit close in tone on the warm palette — a hairline edge gives cards a definite boundary, as noir/blanc do. */ [data-theme="forge"] .card, [data-theme="forge"] .section-card, [data-theme="forge"] .lift-card, [data-theme="forge"] .workout-card { border: 1px solid var(--border); } /* ── THE FOCUS MARKER — "do this next" ──────────────────────────────────────── The signature forge glow, applied to the ONE element per screen that is the primary action for the user's current state. See DECISIONS 2026-07-21. js/focus.js is the arbiter; this is only the paint. IT IS APPLIED BY CLASS, NOT SCOPED TO A COMPONENT. It used to be hardcoded onto .grace-banner (the upgrade card), which meant a PAYING member saw no focus at all and a free member saw the app pointing at the shop rather than at their workout. The upgrade card is now just one candidate among several, and the last one — training outranks selling. EVERY THEME GETS IT (owner 2026-07-20). It was briefly forge-only, which made the product's signature element vanish on a theme switch; deriving both layers from the theme's OWN tokens means each theme renders its own version instead of one theme owning the treatment. That is also why there are no --promo-* literals any more. --focus-pos is set inline by focus.js from a STABLE hash of the target, so each focus glows from its own corner and stays put across re-renders. The fallback keeps the rule sane if the class is ever applied without the JS. The z-index pair is load-bearing. An absolutely-positioned ::before paints ABOVE non-positioned in-flow siblings, so without it the highlight washes across the card's own headline and buttons instead of glowing behind them. pointer-events:none fixes clicks only, not the visual. NEVER promote this to a bare `.card` rule: overflow:hidden is required to contain the radial, and it CLIPS children that deliberately leave the card (e.g. .ps-fork-menu, position:absolute; top:100%). Opt in per element, after checking that element for escaping children. */ .is-focus { position: relative; overflow: hidden; background: linear-gradient(120deg, color-mix(in srgb, var(--surface) 88%, var(--primary) 12%), color-mix(in srgb, var(--surface-2) 82%, var(--primary) 18%)); } .is-focus::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at var(--focus-pos, top right), color-mix(in srgb, var(--primary) 35%, transparent), transparent 70%); } .is-focus > * { position: relative; z-index: 1; } /* The INLINE form, for a focus that lands on a row rather than a card: a radial glow on a short wide row reads as a smudge and fights the row separators, so the same concept renders as an accent tint plus a left rail. (Same shape as .set-row-next, which is a finer-grained "where you are in the list" affordance and is NOT the screen focus — the two coexist.) */ .is-focus-inline { background: color-mix(in srgb, var(--primary) 12%, transparent); box-shadow: inset 3px 0 0 var(--primary); } /* high-contrast opts OUT of the glow. That theme exists to maximise text/background separation for users who need it, and a translucent wash over the card surface is the one thing that directly undoes it — the same reason the accent rules already exclude it. It keeps the flat card; it loses a flourish, which is the correct trade. */ [data-theme="high-contrast"] .is-focus { background: var(--surface); } [data-theme="high-contrast"] .is-focus::before { content: none; } /* Light theme — light surfaces, dark text, accessible contrast. The --primary fallback stays charcoal (see :root note) so an unstyled/stale load never flashes blue; the live accent still overrides via [data-accent]. */ [data-theme="light"] { color-scheme: light; --bg: #eaeef2; --surface: #ffffff; --surface-2: #dfe5ec; --border: #bdc6d1; --primary: #374151; --primary-dark: #1f2937; --secondary: #0d9488; --secondary-dark: #0f766e; --tertiary: #d97706; --tertiary-dark: #b45309; --text: #0f172a; --text-secondary: #475569; --danger: #dc2626; --success: #16a34a; --warning: #d97706; /* Light frosted scrim + darker ring track / phase colours that stay legible on a light backdrop. */ --scrim: rgba(241, 245, 249, 0.9); --ring-track: rgba(15, 23, 42, 0.12); --phase-red: #dc2626; --phase-orange: #ea580c; --phase-yellow: #a16207; --phase-green: #16a34a; } /* High contrast — standalone accessibility theme: near-black text on white, black borders, and saturated dark accents that hold ≥7:1 contrast (WCAG AAA) against white, so white-on-accent buttons stay legible too. */ [data-theme="high-contrast"] { color-scheme: light; --bg: #ffffff; --surface: #ffffff; --surface-2: #e6e6e6; --border: #000000; --primary: #0033cc; --primary-dark: #002299; /* AAA-tuned secondary accents that hold ≥7:1 on white (white-on-accent stays legible). High contrast pins these — the named-accent overrides below are scoped to exclude it, exactly like --primary. */ --secondary: #006b6b; --secondary-dark: #004d4d; --tertiary: #8a4b00; --tertiary-dark: #6b3a00; --text: #000000; --text-secondary: #1a1a1a; --danger: #b00000; --success: #006b2d; --warning: #6b4500; /* Near-opaque white scrim (blur/translucency erodes contrast) + bold black track + saturated dark phase colours that hold AAA contrast on white. */ --scrim: rgba(255, 255, 255, 0.97); --ring-track: #000000; --phase-red: #b00000; --phase-orange: #8a4b00; --phase-yellow: #6b5800; --phase-green: #006b2d; } /* On white surfaces, cards/inputs lose their edges without a visible border, and focus needs to be unmistakable. */ [data-theme="high-contrast"] .card, [data-theme="high-contrast"] .section-card, [data-theme="high-contrast"] .lift-card, [data-theme="high-contrast"] .workout-card { border: 1px solid var(--border); } [data-theme="high-contrast"] .tab-bar { border-top: 2px solid var(--border); } [data-theme="high-contrast"] :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } /* Noir — true-black OLED: pure-black surfaces, near-white text, and a MONOCHROME white accent (pinned below so the accent picker can't tint it). Semantic colours (danger/success/warning) and phase colours stay as the dark theme so errors and the timer ramp still read. (feat_theme_noir) */ [data-theme="noir"] { color-scheme: dark; --bg: #000000; --surface: #0a0a0a; --surface-2: #222222; --border: #333333; --primary: #ffffff; --primary-dark: #e0e0e0; /* Secondary/tertiary kept as dark greys so the monochrome look holds AND white-on-accent (.btn-secondary etc.) stays legible without overrides. */ --secondary: #404040; --secondary-dark: #525252; --tertiary: #525252; --tertiary-dark: #404040; --text: #f5f5f5; --text-secondary: #8a8a8a; --danger: #ef4444; --success: #22c55e; --warning: #f59e0b; --scrim: rgba(0, 0, 0, 0.92); --ring-track: rgba(255, 255, 255, 0.1); --phase-red: #ef4444; --phase-orange: #f97316; --phase-yellow: #eab308; --phase-green: #22c55e; } /* On pure black, surfaces sit a hair off the background — a hairline border gives cards/inputs a definite edge. This border is what CARRIES the card edge in noir: page|card is 1.06, far under the 1.15 fill floor, and deliberately so — flat greys ARE the theme. Until fix_theme_surface_ramps_below_contrast_floor the border was --border #1c1c1c, only 1.16 against the card, so the mechanism was right and simply could not be seen. It is now #333333 (1.57). */ [data-theme="noir"] .card, [data-theme="noir"] .section-card, [data-theme="noir"] .lift-card, [data-theme="noir"] .workout-card { border: 1px solid var(--border); } /* A surface/outline button on pure black is nearly invisible (black-on-black) — give every button a slim border so its edge reads. This used to hardcode #333 BECAUSE the card --border (#1c1c1c) was too faint on a button's smaller footprint; --border is now #333333 itself, so the exception has dissolved and it goes back through the token. (fix_noir_theme_button_border, then fix_theme_surface_ramps_below_contrast_floor) */ [data-theme="noir"] .btn { border: 1px solid var(--border); } /* The white accent means anything FILLED with --primary needs dark text (the app otherwise hardcodes white-on-primary). Scoped to the prominent primary-filled controls; everything else uses --primary only for borders/dots/rings. */ [data-theme="noir"] .btn-primary, [data-theme="noir"] .accent-custom-wrap.is-active, [data-theme="noir"] .log-pill, [data-theme="noir"] .settings-tab.active, [data-theme="noir"] .hub-seg-opt.active, [data-theme="noir"] .data-migration-banner, [data-theme="noir"] .section-card[open] > summary::after, [data-theme="noir"] .accent-gradient { color: #000; } /* Noir is fully black & white: desaturate EVERYTHING the palette can't reach — coloured emoji, SVG icons with hardcoded fills (e.g. the amber flame), photos, charts, semantic colours. A grayscale filter on the document ROOT does this in one stroke; per the CSS spec the root element is EXEMPT from filter creating a containing block, so position:fixed overlays (rest timer, banners) are NOT broken. (feat_theme_noir — full monochrome) */ html[data-theme="noir"] { filter: grayscale(1); } /* Blanc — the inverse of Noir: paper-white surfaces, near-black text, and a MONOCHROME black accent (pinned below so the accent picker can't tint it). Like Noir it grayscales the whole document, so it's a true black-&-white light theme. --primary is black and the app hardcodes white-on-primary, so filled primary controls (white text on black) stay legible with no override — the mirror image of Noir's dark-text-on-white-accent fix. (feat_blanc_theme) */ [data-theme="blanc"] { color-scheme: light; --bg: #ffffff; --surface: #f7f7f7; --surface-2: #dfdfdf; --border: #c8c8c8; --primary: #000000; --primary-dark: #1f1f1f; /* Secondary/tertiary kept as light greys so the monochrome look holds AND white-on-accent (.btn-secondary etc.) stays legible without overrides. */ --secondary: #bdbdbd; --secondary-dark: #ababab; --tertiary: #ababab; --tertiary-dark: #bdbdbd; --text: #0a0a0a; --text-secondary: #6b6b6b; --danger: #ef4444; --success: #22c55e; --warning: #f59e0b; --scrim: rgba(255, 255, 255, 0.92); --ring-track: rgba(0, 0, 0, 0.1); --phase-red: #ef4444; --phase-orange: #f97316; --phase-yellow: #eab308; --phase-green: #22c55e; } /* On near-white, surfaces sit a hair off the background — a hairline border gives cards/inputs a definite edge (mirrors Noir's on-black treatment) — and as in noir it is this border, not the fill step, that carries the edge. It was #e0e0e0 (1.23 against the card, i.e. invisible); now #c8c8c8 (1.56). (fix_theme_surface_ramps_below_contrast_floor) */ [data-theme="blanc"] .card, [data-theme="blanc"] .section-card, [data-theme="blanc"] .lift-card, [data-theme="blanc"] .workout-card { border: 1px solid var(--border); } /* A light .btn-surface on white loses its edge — give every button a slim border so they stay discernible (the light-theme counterpart of fix_noir_theme_button_border). */ [data-theme="blanc"] .btn { border: 1px solid var(--border); } /* Fully black & white: desaturate everything the palette can't reach — coloured emoji, SVG icons, photos, charts, semantic colours. Grayscale on the document ROOT (exempt from creating a containing block, so fixed overlays aren't broken) does it in one stroke, exactly like Noir. (feat_blanc_theme) */ html[data-theme="blanc"] { filter: grayscale(1); } /* Chroma — a saturated, jewel-toned dark theme: a deep indigo/violet base with an electric violet primary and cyan + magenta secondaries. Unlike Dark (which is a neutral slate that defers to the accent picker), Chroma is OPINIONATED like Noir/Blanc — it pins its own vivid accent below so the whole app stays colourful whatever accent is stored. --primary is a purple-600 so the app's hardcoded white-on-primary stays legible. (feat_pwa_chroma_theme) */ [data-theme="chroma"] { color-scheme: dark; --bg: #12092a; --surface: #211648; --surface-2: #34226d; --border: #4a3491; --primary: #9333ea; --primary-dark: #7e22ce; --secondary: #22d3ee; --secondary-dark: #06b6d4; --tertiary: #f472b6; --tertiary-dark: #ec4899; --text: #f5f3ff; --text-secondary: #b7a9e0; --danger: #fb7185; --success: #34d399; --warning: #fbbf24; /* Violet-tinted scrim + ring track and a vivid phase ramp, so the timer/stopwatch carry the theme's colour. */ --scrim: rgba(10, 4, 26, 0.86); --ring-track: rgba(168, 85, 247, 0.16); --phase-red: #fb7185; --phase-orange: #fb923c; --phase-yellow: #facc15; --phase-green: #34d399; } /* Sepia — a warm, parchment-toned LIGHT theme: aged-paper surfaces, espresso-brown text, and an opinionated walnut-brown accent pinned below (like Noir/Blanc/Chroma) so the whole app stays warm whatever accent is stored. Deliberately NOT grayscaled — the warm tone IS the theme. --primary is a mid walnut, dark enough that the app's hardcoded white-on-primary stays legible. (feat_theme_sepia) */ [data-theme="sepia"] { color-scheme: light; --bg: #e5d9c2; --surface: #f7eddb; --surface-2: #e2d2b0; --border: #cbb994; --primary: #7c5a3a; --primary-dark: #634527; --secondary: #9c6b3f; --secondary-dark: #7c5228; --tertiary: #b08d57; --tertiary-dark: #8f6f3e; --text: #3b2f1e; --text-secondary: #6f5b40; --danger: #a3341e; --success: #4d7c2f; --warning: #b5791a; /* Warm parchment scrim + ring track and a phase ramp that stays legible on the light scrim, so the timer/stopwatch carry the theme's warm tone. */ --scrim: rgba(237, 224, 200, 0.92); --ring-track: rgba(59, 47, 30, 0.14); --phase-red: #b91c1c; --phase-orange: #c2410c; --phase-yellow: #a16207; --phase-green: #4d7c2f; } /* On the low-contrast parchment, cards sit only a hair off the background — a hairline border gives them a definite edge (mirrors Blanc's on-white treatment). */ [data-theme="sepia"] .card, [data-theme="sepia"] .section-card, [data-theme="sepia"] .lift-card, [data-theme="sepia"] .workout-card { border: 1px solid var(--border); } /* "Flatten icons" (feat_theme_flatten_icons_and_accent_lock) — recolour every colourful EMOJI (flatten.js wraps them in .app-icon) into the ACCENT. Line/mask icons already follow --primary; this targets the emoji. Since feat_flatten_icons_tonal_duotone_chromatic_accents the recolour is a TONAL DUOTONE, not a flat silhouette: an SVG filter (#app-icon-duotone, defs in index.html) grayscales the glyph, clamps its shadow floor for legibility, tints it to the accent (feFlood flood-color: var(--primary) — so it tracks the live accent, no JS), and clips to the glyph's own alpha (transparent stays transparent). The accent's hue wears the emoji's internal light/dark; an achromatic accent (Noir #fff / Blanc #000) degenerates to shades of grey. */ /* When NOT flattened, display:contents so the wrapper generates NO box: the emoji rejoins the surrounding text and doesn't become a stray flex/grid item (which spread section rows edge-to-edge — the "justified" regression). A CSS `filter` needs a box, so flattened icons opt into inline-block below. (fix_flatten_app_icon_summary_layout) */ .app-icon { display: contents; } /* Borderless edit affordance — a bare pencil, no button chrome (owner 2026-07-07). Used for the Account username / password edit pencils. */ .settings-edit-btn { border: none; background: transparent; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; padding: 4px; border-radius: 4px; transition: color 0.15s; } .settings-edit-btn:hover { color: var(--primary); } html[data-flatten="1"] .app-icon { display: inline-block; /* a filter needs a box; the summary slot already opts in the same way */ filter: url(#app-icon-duotone); } #app-icon-duotone feFlood { flood-color: var(--primary); } /* "Invert" (feat_flatten_icons_invert_secondary_accent): while flattened, recolour the icon silhouettes into the accent's paired SECONDARY colour (--accent-danger — the scheme's live second colour shown next to it in the picker, amber for charcoal) instead of --primary. Covers the emoji silhouettes plus the accent-following line/mask/nav icons so the whole icon set stays one colour. Only active with data-flatten-invert="1" (default on for the charcoal accent). Higher specificity (html + 2 attrs + class) beats the per-nav `.tab .icon-mask { color: --primary }` rules; it targets icons only, so text labels keep the accent. NB: this tracks --accent-danger (the accent's paired swatch), NOT the theme's --danger — for charcoal the two differ (amber #f59e0b vs the theme red), which is exactly the case the checkbox is designed for. (fix_flatten_invert_accent_paired_colour) */ html[data-flatten="1"][data-flatten-invert="1"] .app-icon { filter: url(#app-icon-duotone-invert); } #app-icon-duotone-invert feFlood { flood-color: var(--accent-danger); } /* The forge anvil mark (nav Home + Forge tool) is an , so it opts into the SAME tonal-duotone flatten as the emoji glyphs — the accent hue wears the anvil's internal light/dark, restoring the detail the flat mask discarded. Unflattened it shows its own amber art. (fix_forge_icons_restore_lost_detail) */ html[data-flatten="1"] .forge-mark { filter: url(#app-icon-duotone); } html[data-flatten="1"][data-flatten-invert="1"] .forge-mark { filter: url(#app-icon-duotone-invert); } html[data-flatten="1"][data-flatten-invert="1"] .icon-mask, html[data-flatten="1"][data-flatten-invert="1"] .icon-glyph, html[data-flatten="1"][data-flatten-invert="1"] .tab svg, html[data-flatten="1"][data-flatten-invert="1"] .tab-tool svg { color: var(--accent-danger); } /* Accent colours (user-pickable in Settings, see js/accent.js). A separate axis from the theme: each overrides --primary / --primary-dark. Scoped to exclude high-contrast, which keeps its own AAA-tuned blue. Default 'blue' matches the app's original accent, so an un-set user sees no change. (user 2026-06-09) */ /* EACH ACCENT APPLIES BOTH OF ITS SWATCH COLOURS. The picker draws two dots per accent — the primary (`hex`) and its paired danger (`danger`) — and states that selecting it "applies both" (js/pages/settings.js). Until 2026-07-20 only the primary was actually applied: --accent-danger fell back to the theme's --danger for every accent but charcoal, so the WARM pairings (violet/amber/rose/pink/ember, all #111827) were advertised in the swatch and never applied — the picker lied. The cool accents only looked correct by coincidence, their pairing being the same red as --danger. --accent-danger drives the flatten "Invert" recolour, .badge-rir, .badge-lead and the modal ✕, so this is what makes BOTH icon toggles honour the accent you picked. SYNC POINT: these must match `danger` in js/accent.js ACCENTS[] — the swatch reads from there, these rules are what actually apply. A spec asserts the two agree. (owner 2026-07-20) */ html:not([data-theme="high-contrast"])[data-accent="blue"] { --primary: #3b82f6; --primary-dark: #2563eb; --accent-danger: #ef4444; } html:not([data-theme="high-contrast"])[data-accent="indigo"] { --primary: #6366f1; --primary-dark: #4f46e5; --accent-danger: #ef4444; } html:not([data-theme="high-contrast"])[data-accent="violet"] { --primary: #8b5cf6; --primary-dark: #7c3aed; --accent-danger: #111827; } html:not([data-theme="high-contrast"])[data-accent="emerald"] { --primary: #10b981; --primary-dark: #059669; --accent-danger: #ef4444; } html:not([data-theme="high-contrast"])[data-accent="teal"] { --primary: #06b6d4; --primary-dark: #0891b2; --accent-danger: #ef4444; } html:not([data-theme="high-contrast"])[data-accent="amber"] { --primary: #f59e0b; --primary-dark: #d97706; --accent-danger: #111827; } html:not([data-theme="high-contrast"])[data-accent="rose"] { --primary: #f43f5e; --primary-dark: #e11d48; --accent-danger: #111827; } html:not([data-theme="high-contrast"])[data-accent="pink"] { --primary: #ec4899; --primary-dark: #db2777; --accent-danger: #111827; } /* Ember — the Iron Forge accent and the PWA's default (branding addendum §1). The amber already used for the forge marks, promoted to THE accent. Bright enough to stand off the dark surfaces AND to read as link text, so unlike charcoal it needs no dark-theme reversal and no --link override. Its picker pairing is the near-black neutral, now actually applied (see the sync-point note above) rather than falling through to the theme red. */ html:not([data-theme="high-contrast"])[data-accent="ember"] { --primary: #e0602a; --primary-dark: #b8461c; --accent-danger: #111827; } /* Charcoal scheme (feat_accent_two_colour_schemes): a monochrome slate accent — dark enough for white text on light themes, light enough to stand off the dark themes' near-black surfaces (noir's button border covers pure black). Paired with an amber danger below. */ html:not([data-theme="high-contrast"])[data-accent="charcoal"] { --primary: #374151; --primary-dark: #1f2937; --accent-danger: #f59e0b; } /* Accent-coloured TEXT links (help/hint copy) track the accent by default. But the CHARCOAL accent is a dark slate tuned for button BACKGROUNDS (white text on it); as TEXT on the dark theme's dark surface it's unreadable — so lift links to a readable light slate there. (owner 2026-07-04: assistance-hint link unreadable in dark mode.) */ :root { --link: var(--primary); } /* The accent's paired SECONDARY colour (the swatch shown beside it in the picker), used by the flatten "Invert" recolour, .badge-rir, .badge-lead and the modal ✕. Every NAMED accent now sets this explicitly (above) so the applied colour matches the swatch. This :root value is the FALLBACK for the cases with no named accent: a CUSTOM scheme (accent.js sets --danger inline, so this follows it automatically) and an unset accent. (fix_flatten_invert_accent_paired_colour; per-accent wiring 2026-07-20) */ :root { --accent-danger: var(--danger); } html[data-theme="dark"][data-accent="charcoal"], html:not([data-theme])[data-accent="charcoal"] { --link: #94a3b8; } /* LIGHT theme: darken link text to clear WCAG AA (4.5:1) against the light surfaces. --link defaults to the accent (--primary). On every DARK/coloured theme that clears 4.5:1 against the page (measured: forge 5.28, dark 5.00, noir 21, high-contrast 8.95), but the LIGHT theme is the only one pairing a mid-saturation accent with a near-white page — the default ember measured just 3.07:1 (fix_light_theme_link_contrast_below_aa). Underlining satisfies the separate "don't rely on colour alone" rule but does NOT fix contrast, so links here take a HUE-PRESERVING darker shade of the accent (RGB scaled uniformly → same hue, lower value), each tuned to ≥4.6:1 against the DARKEST light surface a link sits on (--surface-2 #dfe5ec) and correspondingly higher on --bg/--surface. Charcoal is already 8.84:1 as text on light, so it keeps its accent unchanged. Guarded per-accent by theme-contrast.test.mjs; floor recorded in docs/branding-and-styling.md. */ html[data-theme="light"][data-accent="blue"] { --link: #2d62ba; } html[data-theme="light"][data-accent="indigo"] { --link: #5456cc; } html[data-theme="light"][data-accent="violet"] { --link: #724bca; } html[data-theme="light"][data-accent="emerald"] { --link: #0a7350; } html[data-theme="light"][data-accent="teal"] { --link: #046f81; } html[data-theme="light"][data-accent="amber"] { --link: #8c5a06; } html[data-theme="light"][data-accent="rose"] { --link: #b93047; } html[data-theme="light"][data-accent="pink"] { --link: #af3572; } html[data-theme="light"][data-accent="ember"] { --link: #a7481f; } /* CUSTOM hex accents are set inline by accent.js and can be arbitrarily light, so AA cannot be GUARANTEED for a pathological pick (e.g. pale yellow). Best-effort: mix the chosen accent toward the near-black text colour so links darken automatically on the light page while keeping the user's hue. Not covered by the guard (the hex is runtime); the residual limitation is documented in docs/branding-and-styling.md. */ html[data-theme="light"][data-accent="custom"] { --link: color-mix(in srgb, var(--primary) 60%, #0f172a); } /* Charcoal is our DEFAULT scheme: a dark slate tuned for white-text buttons on the LIGHT themes. On the DARK themes that near-black fill vanishes into the dark surfaces — buttons AND icons don't stand out at all. So on dark + charcoal we REVERSE the accent to a LIGHT slate (with dark text on it), the way amber/noir pop against black. Scoped to charcoal only — the bright accents already stand off the dark surfaces and want their own hue. (owner 2026-07-04: dark+charcoal buttons don't stand out; reverse it like amber.) */ html[data-theme="dark"][data-accent="charcoal"], html:not([data-theme])[data-accent="charcoal"] { --primary: #cbd5e1; /* slate-300 — light, stands off the dark surfaces */ --primary-dark: #e2e8f0; /* slate-200 — hover lightens, like a light button */ } /* The now-light accent means anything FILLED with --primary needs DARK text (the app hardcodes white-on-primary). Same control list as Noir's white-accent fix. */ html[data-theme="dark"][data-accent="charcoal"] .btn-primary, html[data-theme="dark"][data-accent="charcoal"] .btn-secondary, html[data-theme="dark"][data-accent="charcoal"] .accent-custom-wrap.is-active, html[data-theme="dark"][data-accent="charcoal"] .log-pill, html[data-theme="dark"][data-accent="charcoal"] .settings-tab.active, html[data-theme="dark"][data-accent="charcoal"] .hub-seg-opt.active, html[data-theme="dark"][data-accent="charcoal"] .data-migration-banner, html[data-theme="dark"][data-accent="charcoal"] .section-card[open] > summary::after, html[data-theme="dark"][data-accent="charcoal"] .accent-gradient, html[data-theme="dark"][data-accent="charcoal"] .grace-cta, html:not([data-theme])[data-accent="charcoal"] .btn-primary, html:not([data-theme])[data-accent="charcoal"] .btn-secondary, html:not([data-theme])[data-accent="charcoal"] .accent-custom-wrap.is-active, html:not([data-theme])[data-accent="charcoal"] .log-pill, html:not([data-theme])[data-accent="charcoal"] .settings-tab.active, html:not([data-theme])[data-accent="charcoal"] .hub-seg-opt.active, html:not([data-theme])[data-accent="charcoal"] .data-migration-banner, html:not([data-theme])[data-accent="charcoal"] .section-card[open] > summary::after, html:not([data-theme])[data-accent="charcoal"] .accent-gradient, html:not([data-theme])[data-accent="charcoal"] .grace-cta { color: #111827; } /* Secondary + tertiary accents — same hue swatches as the primary accent, picked independently per channel (data-secondary / data-tertiary, js/accent.js). Same high-contrast exemption. A 'custom' choice sets the var inline (no rule here), so the inline style wins. (feat_secondary_accent_colours) */ html:not([data-theme="high-contrast"])[data-secondary="blue"] { --secondary: #3b82f6; --secondary-dark: #2563eb; } html:not([data-theme="high-contrast"])[data-secondary="indigo"] { --secondary: #6366f1; --secondary-dark: #4f46e5; } html:not([data-theme="high-contrast"])[data-secondary="violet"] { --secondary: #8b5cf6; --secondary-dark: #7c3aed; } html:not([data-theme="high-contrast"])[data-secondary="emerald"] { --secondary: #10b981; --secondary-dark: #059669; } html:not([data-theme="high-contrast"])[data-secondary="teal"] { --secondary: #06b6d4; --secondary-dark: #0891b2; } html:not([data-theme="high-contrast"])[data-secondary="amber"] { --secondary: #f59e0b; --secondary-dark: #d97706; } html:not([data-theme="high-contrast"])[data-secondary="rose"] { --secondary: #f43f5e; --secondary-dark: #e11d48; } html:not([data-theme="high-contrast"])[data-secondary="pink"] { --secondary: #ec4899; --secondary-dark: #db2777; } html:not([data-theme="high-contrast"])[data-tertiary="blue"] { --tertiary: #3b82f6; --tertiary-dark: #2563eb; } html:not([data-theme="high-contrast"])[data-tertiary="indigo"] { --tertiary: #6366f1; --tertiary-dark: #4f46e5; } html:not([data-theme="high-contrast"])[data-tertiary="violet"] { --tertiary: #8b5cf6; --tertiary-dark: #7c3aed; } html:not([data-theme="high-contrast"])[data-tertiary="emerald"] { --tertiary: #10b981; --tertiary-dark: #059669; } html:not([data-theme="high-contrast"])[data-tertiary="teal"] { --tertiary: #06b6d4; --tertiary-dark: #0891b2; } html:not([data-theme="high-contrast"])[data-tertiary="amber"] { --tertiary: #f59e0b; --tertiary-dark: #d97706; } html:not([data-theme="high-contrast"])[data-tertiary="rose"] { --tertiary: #f43f5e; --tertiary-dark: #e11d48; } html:not([data-theme="high-contrast"])[data-tertiary="pink"] { --tertiary: #ec4899; --tertiary-dark: #db2777; } /* Noir pins a monochrome white accent regardless of the accent picker (mirrors how high-contrast pins its blue). Placed AFTER the accent rules so it wins the equal-specificity tie when data-accent/-secondary/-tertiary are set. (feat_theme_noir) */ /* --accent-danger pinned to the theme's own danger here (and on Blanc below) to PRESERVE today's behaviour now that the accent rules apply their paired colour: without this pin a picked accent's pairing would leak a hue into these deliberately monochrome themes. Chroma + Sepia already pin their own. (owner 2026-07-20) */ html[data-theme="noir"][data-accent] { --primary: #ffffff; --primary-dark: #e0e0e0; --accent-danger: var(--danger); } html[data-theme="noir"][data-secondary] { --secondary: #404040; --secondary-dark: #525252; } html[data-theme="noir"][data-tertiary] { --tertiary: #525252; --tertiary-dark: #404040; } /* Blanc pins a monochrome BLACK accent regardless of the accent picker — the inverse of Noir's pin above. (feat_blanc_theme) */ html[data-theme="blanc"][data-accent] { --primary: #000000; --primary-dark: #1f1f1f; --accent-danger: var(--danger); } html[data-theme="blanc"][data-secondary] { --secondary: #bdbdbd; --secondary-dark: #ababab; } html[data-theme="blanc"][data-tertiary] { --tertiary: #ababab; --tertiary-dark: #bdbdbd; } /* Chroma pins its vivid violet/cyan/magenta accent regardless of the accent picker (same equal-specificity-then-source-order trick as Noir/Blanc), so its colour identity holds however the user's accent is set. (feat_pwa_chroma_theme) */ html[data-theme="chroma"][data-accent] { --primary: #9333ea; --primary-dark: #7e22ce; --accent-danger: #22d3ee; } html[data-theme="chroma"][data-secondary] { --secondary: #22d3ee; --secondary-dark: #06b6d4; } html[data-theme="chroma"][data-tertiary] { --tertiary: #f472b6; --tertiary-dark: #ec4899; } /* Sepia pins its warm walnut accent regardless of the picker — opinionated like Chroma. --accent-danger pinned to a warm brick so the flatten-invert recolour stays in the sepia family. (feat_theme_sepia) */ /* --accent-danger drives the flattened icon silhouettes (flatten-invert, default on for charcoal) + the Primary pill. In Sepia the old brick red (#a3341e) read too vibrant/red against the parchment; a flatter, browner tone keeps the sepia warmth. (fix_sepia_icon_flatter_brown) */ html[data-theme="sepia"][data-accent] { --primary: #7c5a3a; --primary-dark: #634527; --accent-danger: #8a5a3a; } html[data-theme="sepia"][data-secondary] { --secondary: #9c6b3f; --secondary-dark: #7c5228; } html[data-theme="sepia"][data-tertiary] { --tertiary: #b08d57; --tertiary-dark: #8f6f3e; } /* The flatten "Invert" recolour paints icons in --accent-danger (the accent's paired swatch). The default charcoal accent pairs to amber (#f59e0b), which clashes badly with Chroma's violet/indigo palette (orange icons). Chroma pins its own paired colour — its vivid cyan secondary — so flattened icons read as an on-theme violet+cyan pair whatever accent is stored. Two-attribute selector + placed after the charcoal rule so it wins. (fix_chroma_icon_colour_off_theme) */ /* On the red-family accents — rose, pink, amber, violet — the standard danger red blends into the accent and stops reading as the destructive action, so the danger button switches to a high-contrast neutral: WHITE on the dark theme (default) and BLACK on the light theme, so it stays legible + distinct on each surface. Every other accent + high-contrast keep red. (user 2026-06-12) */ html:not([data-theme="high-contrast"])[data-accent="rose"] .btn-danger, html:not([data-theme="high-contrast"])[data-accent="pink"] .btn-danger, html:not([data-theme="high-contrast"])[data-accent="amber"] .btn-danger, html:not([data-theme="high-contrast"])[data-accent="ember"] .btn-danger, html:not([data-theme="high-contrast"])[data-accent="violet"] .btn-danger { background: #f1f5f9; /* dark theme (default): white button, dark text */ color: #0f172a; } html[data-theme="light"][data-accent="rose"] .btn-danger, html[data-theme="light"][data-accent="pink"] .btn-danger, html[data-theme="light"][data-accent="amber"] .btn-danger, html[data-theme="light"][data-accent="ember"] .btn-danger, html[data-theme="light"][data-accent="violet"] .btn-danger { background: #111827; /* light theme: black button, white text */ color: #fff; } /* Charcoal scheme → amber danger (amber is visible on every theme; dark text stays legible, and it pops against the monochrome accent). (feat_accent_two_colour_schemes) */ html:not([data-theme="high-contrast"])[data-accent="charcoal"] .btn-danger { background: #f59e0b; color: #111827; } /* Accent picker swatches in Settings. */ /* White-label icon override (feat_tenant_branding_icons): a tenant-uploaded glyph rendered in place of a built-in. Sized to the surrounding text by default. */ .icon-glyph { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; object-fit: contain; } .accent-btn { display: inline-flex; align-items: center; gap: 7px; } .accent-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); } /* The paired danger swatch in a two-colour scheme button — a smaller dot tucked against the accent dot. (feat_accent_two_colour_schemes) */ .accent-dot--danger { width: 10px; height: 10px; margin-left: -5px; } /* Marks the default swatch in a channel so the baseline is identifiable. */ .accent-default-tag { display: inline-flex; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .75; margin-left: 2px; border: 1px solid currentColor; border-radius: 4px; padding: 1px 3px 0; line-height: 1; } /* Clear-data / delete-account "type your username" copy affordance: the name and the copy icon share ONE bordered box (bordered on all sides), and the icon flips to a tick for 5s on copy. (fix_delete_user_copy_button_border_tick) */ .cd-copy-field { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; } .cd-copy-field #cd-username { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cd-copy-btn { flex: none; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; padding: 2px; border-radius: 4px; transition: color 0.15s; } .cd-copy-btn:hover { color: var(--text); } .cd-copy-btn.copied { color: var(--success, var(--primary)); } /* Per-channel accent picker rows (primary/secondary/tertiary) + the custom-colour swatch that opens the native all-colour selector. (feat_secondary_accent_colours) */ .accent-row { margin-top: 10px; } .accent-row:first-of-type { margin-top: 0; } .accent-row-label { font-weight: 600; margin: 0 0 6px 4px; } .accent-custom-wrap { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-size: 13px; font-weight: 600; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); cursor: pointer; } .accent-custom-wrap.is-active { background: var(--primary); color: #fff; } .accent-custom { width: 14px; height: 14px; flex: none; padding: 0; border: none; border-radius: 50%; background: none; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); } .accent-custom::-webkit-color-swatch-wrapper { padding: 0; } .accent-custom::-webkit-color-swatch { border: none; border-radius: 50%; } .accent-custom::-moz-color-swatch { border: none; border-radius: 50%; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Anchors inherit the surrounding text colour by default. Much of the app uses as cards/rows/buttons (e.g. .active-program-card, .btn, .badge), and with no base colour those fell to the UA link palette — most visibly the purple *visited*-link colour bleeding into headings like the home hub's "Up Next: " (user 2026-07-03). Genuine text-links opt back in explicitly (.help-content a, .switch-link a, .analytics-consent-text a → var(--primary)). */ a { color: inherit; } /* Checkboxes / radios follow the theme accent instead of the browser default (which ignored dark mode + the accent picker). (user 2026-06-09) */ input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); } /* DEFAULT styling for text-like controls so a bare /