/* 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; } /* 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: #f1f5f9; --surface: #ffffff; --surface-2: #e2e8f0; --border: #cbd5e1; --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: #161616; --border: #1c1c1c; --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. */ [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. A hair lighter than the card --border (#1c1c1c), which is too faint on the smaller button footprint. (fix_noir_theme_button_border) */ [data-theme="noir"] .btn { border: 1px solid #333; } /* 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: #ededed; --border: #e0e0e0; --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). */ [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: #140a2e; --surface: #211648; --surface-2: #322169; --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: #ece0c8; --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 icon glyph into a solid single-colour silhouette in the ACCENT. Line/mask icons already follow --primary; this targets the colourful EMOJI, which flatten.js wraps in .app-icon so the recolour hits the glyph and not the surrounding text. color:transparent hides the emoji's own colours; the zero-offset text-shadow repaints the glyph outline in the accent. Active only while data-flatten="1" (Noir/Blanc force it on and already grayscale on top; Light/Dark/High-contrast toggle it via the Settings checkbox). */ /* display:contents so the wrapper generates NO box: the emoji text rejoins the surrounding text as one run and doesn't become a separate flex/grid item (which spread section rows edge-to-edge — the "justified" regression). The recolour still applies because color + text-shadow are inherited by the emoji text from this element. (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 { color: transparent; text-shadow: 0 0 0 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 { text-shadow: 0 0 0 var(--accent-danger); } 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) */ html:not([data-theme="high-contrast"])[data-accent="blue"] { --primary: #3b82f6; --primary-dark: #2563eb; } html:not([data-theme="high-contrast"])[data-accent="indigo"] { --primary: #6366f1; --primary-dark: #4f46e5; } html:not([data-theme="high-contrast"])[data-accent="violet"] { --primary: #8b5cf6; --primary-dark: #7c3aed; } html:not([data-theme="high-contrast"])[data-accent="emerald"] { --primary: #10b981; --primary-dark: #059669; } html:not([data-theme="high-contrast"])[data-accent="teal"] { --primary: #06b6d4; --primary-dark: #0891b2; } html:not([data-theme="high-contrast"])[data-accent="amber"] { --primary: #f59e0b; --primary-dark: #d97706; } html:not([data-theme="high-contrast"])[data-accent="rose"] { --primary: #f43f5e; --primary-dark: #e11d48; } html:not([data-theme="high-contrast"])[data-accent="pink"] { --primary: #ec4899; --primary-dark: #db2777; } /* 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. Defaults to the theme's --danger — so cool accents (whose picker danger IS red) and the warm accents keep today's behaviour — and only charcoal overrides it to its amber pairing (#f59e0b, set on the charcoal accent rule above). Custom schemes set --danger inline (accent.js), so this fallback follows them automatically. (fix_flatten_invert_accent_paired_colour) */ :root { --accent-danger: var(--danger); } html[data-theme="dark"][data-accent="charcoal"], html:not([data-theme])[data-accent="charcoal"] { --link: #94a3b8; } /* 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) */ html[data-theme="noir"][data-accent] { --primary: #ffffff; --primary-dark: #e0e0e0; } 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; } 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="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="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: 9px; 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 /