/* ===================================================================== Design tokens — canonical color palette. Established 2026-05-15 via three consolidation passes: 1. RGB clustering 1,888 → 445 canonicals (threshold=10) 2. Green semantic 75 greens → 8 named role tokens 3. All-family pass remaining hues + neutrals → 132 canonicals total That's a 14× reduction. Roles are now stable: any "filled positive button" reaches for --positive-bg-strong, any "danger pill text" reaches for --danger-text-deep, etc. Convention: - When adding a new color, FIRST check whether one of the tokens below already covers the intent. If yes, use the token. - If not, add it here (with a short purpose note) before using it in a component. Don't introduce one-off hex literals. - Tokens that resolve to the same value via var() are aliases — semantic intent is preserved even when the visual collapses. - See MEMORY.md → color-tokens for the full convention. ===================================================================== */ :root { /* ---------- Surface (backgrounds) ---------- */ --surface-white: #ffffff; /* 675 uses — cards, modal cards */ --surface-pale-cool: #eaf3f6; /* 675 — pale-cool surfaces, list rows */ --surface-pale-blue: var(--surface-pale-cool); /* alias — collapsed in pass 3 */ --surface-mint: #e6f1ec; /* 162 — light mint (success-adjacent) */ --surface-mint-deep: #c5dac9; /* 205 — saturated mint, borders */ --surface-warm: #fff4e2; /* 126 — warm-cream surfaces */ --surface-warm-warning: #fdf3ef; /* 117 — admin / danger panel bg */ --surface-cream: #fff5d6; /* 124 — cream text on dark, badges */ --surface-cream-soft: #f5e8c4; /* 45 — pale gold-cream gradient stop */ /* ---------- Ink (text) ---------- */ --ink-navy: #1c3343; /* 714 — primary text + chrome */ --ink-navy-deep: var(--ink-navy); /* alias — collapsed in pass 3 */ --ink-slate: #3a4a55; /* 612 — secondary chrome / strokes */ --ink-slate-muted: var(--ink-muted); /* alias — collapsed in pass 3 */ --ink-muted: #6a7782; /* 353 — secondary text */ --ink-muted-cool: var(--ink-slate); /* alias — collapsed in pass 3 */ --ink-deep-navy: var(--ink-slate); /* alias — collapsed in pass 3 */ --ink-darkest: #111111; /* 22 — near-black headings (sparingly) */ /* ---------- Borders ---------- */ --border-pale: #d9e2ee; /* 309 — soft borders on cards */ --border-cool: #d2dee0; /* 278 — cool borders, dividers */ --border-blue: var(--border-cool); /* alias — collapsed in pass 3 */ --border-mid: #bfc8cd; /* 72 — slightly stronger cool border */ --border-warm-soft:#ddd4c6; /* 40 — warm soft border (cream cards) */ /* ---------- Brand ---------- */ --brand-deep: #17382d; /* 177 — deepest brand green */ --brand-deep-hover:#1d4a3b; /* 2 — brand-deep button hover (Phase 15.11gg) */ --brand-bronze: #7a4d0a; /* 189 — bronze accent */ /* ---------- Status: success / positive (green family) ---------- Pass 2 collapsed 75 raw greens into these 8 role tokens. */ --positive-bg-strong: var(--brand-deep); /* dark filled buttons */ --positive-bg-bright: #3f8c5a; /* 31 — saturated active-chip / vivid green buttons */ --positive-text-deep: #1f5b34; /* 217 — success badge / "Earned" pill text */ --positive-surface-mint: var(--surface-mint); --positive-surface-deep: #6f927e; /* 2 — mid-pale green panel bg (hover states) */ --positive-border-dark: #1f6b49; /* 20 — dark green button outline */ --positive-border-soft: var(--surface-mint-deep); --ink-green-muted: #5d766b; /* 15 — muted green text on cream */ --status-success-deep: var(--positive-text-deep); /* Phase 15.11dd — `--brand-green` was referenced ~50× in channels.css with hard-coded fallbacks (#1d6f3a) but never defined as a token. Every consumer was rendering the fallback hex instead of a real palette color, drifting the settings page off the canonical positive palette. Alias the bright variant so callers don't have to be rewritten. */ --brand-green: var(--positive-bg-bright); --brand-green-deep: var(--positive-text-deep); --brand-green-border: var(--positive-border-dark); /* Phase 15.11ee — settings-page tints + brand colors that previously lived as repeated raw rgba() expressions in channels.css. Defining them as tokens means one place to adjust the palette and keeps the page on the canonical surface vocabulary. */ --positive-accent-soft: rgba(63, 140, 90, 0.45); /* source-card left-edge accent */ --brand-youtube-red: #cc0000; /* YT brand red (logo, glyphs) */ --brand-youtube-tint: rgba(204, 0, 0, 0.08); /* YT pill background tint */ --admin-tint-soft: rgba(122, 77, 10, 0.08); /* bronze panel tint */ --admin-tint-mid: rgba(122, 77, 10, 0.16); /* bronze panel border */ /* ---------- On/off switch (custom toggle) ---------- Phase 15.11ff — canonical token family for the iOS-style switch component. Currently only consumed by .settings-v2-toggle (the only custom switch in the app) but defined here so any future switch on any page reaches for these instead of rolling its own. */ --toggle-track-w: 44px; --toggle-track-h: 24px; --toggle-thumb-size: 20px; --toggle-thumb-inset: 2px; /* Travel distance for the thumb when the switch flips on = track-w - thumb-size - 2 * thumb-inset = 44 - 20 - 4 = 20px. */ --toggle-thumb-travel: 20px; --toggle-off-bg: var(--border-cool); --toggle-on-bg: var(--brand-green); --toggle-thumb-bg: var(--surface-white); --toggle-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.20); --toggle-focus-ring: 0 0 0 3px rgba(28, 51, 67, 0.18); /* ---------- Status: danger / negative (red family) ---------- */ --danger-text-deep: #7a2e18; /* 138 — danger pill text, admin warning */ --status-danger-deep: var(--danger-text-deep); --danger-surface-pale: var(--surface-warm-warning); /* 117 alias — pale red bg */ --danger-border-soft: #ecc6bf; /* 52 — danger pill borders */ --danger-bg-bright: #8c341d; /* 7 — saturated danger button bg */ /* ---------- Status: warning / caution (orange family) ---------- */ --warning-text-deep: var(--brand-bronze); /* 189 alias — warning text */ --warning-border-soft: #f0d6a3; /* 95 — warning chip borders, pale gold */ --warning-surface-pale: var(--surface-warm); /* alias */ /* ---------- Accent: gold / tier (Architect, badges) ---------- */ --gold-deep: var(--brand-bronze); /* alias */ --gold-accent: #b9892f; /* 32 — bronze-gold for tier ramps */ --gold-bright: #e7c46c; /* 33 — bright gold (Architect navy-gold) */ --gold-cream: var(--surface-warm); /* alias — collapsed */ /* ---------- Info: blue + teal (informational accent) ---------- */ --info-blue-bg-strong: #0f2335; /* 18 — dark filled info bg */ --info-blue-border-mid: var(--border-mid); /* alias */ --info-blue-surface-pale:#e1edf5; /* 39 — pale info bg */ --info-blue-border-dark: #3d6a85; /* 16 — info button outline */ --info-teal-text-deep: #234a5d; /* ~7 — teal-tinted text */ --info-teal-bg-bright: #2a5e60; /* ~4 — bright teal button */ --info-teal-bg-strong: #1d3a3a; /* 3 — dark teal bg */ /* ---------- Accent: purple / pink (sparingly used) ---------- */ --accent-purple-text-deep: #5827a8; --accent-purple-surface-pale:#f3eef8; --accent-purple-border-soft: #b9a5dc; /* ---------- Workspace / Page background ---------- */ --page-cream: var(--surface-warm); /* alias */ --page-mint: var(--surface-mint); /* alias */ /* ---------- Pass 2 family tokens (2026-05-17) ---------- Introduced to absorb 35 distinct outliers + 27 borderline hexes that were scattered as raw literals across product CSS. Each token has at least 10 referencing uses (or names a perceptually distinct hue worth its own role). */ --info-steel-deep: #1c587a; /* 50 uses — saturated steel-blue, chart/data accent */ --info-steel-bright: #2a5f96; /* 30 uses — bright steel-blue, info-pill bg */ --info-steel-soft: #7ba5b5; /* 18 uses — pale steel-teal, info border/bg */ --ink-cool-grey: #93a1ad; /* 80 uses — cool neutral grey, secondary chrome */ --accent-purple-deep: #4a2b6a; /* 35 uses — deep purple, strong purple-tinted accents */ --accent-purple-cool: #aebbe0; /* 6 uses — cool-shifted pale purple (blue-tinted) */ --rust-deep: #b04434; /* 30 uses — burnt rust-red, stress/decay contexts */ --rust-bright: #c4715f; /* 25 uses — brighter rust accent (salmon-leaning) */ --rust-soft: #d5a99f; /* 12 uses — pale rust-pink bg tint */ --bronze-deep: #4a3a16; /* 38 uses — dark olive-bronze, low-key text-on-cream */ --gold-tier-deep: #8c5d2c; /* 24 uses — darker tier/badge gold (between bronze + gold-accent) */ /* ---------- Pass 2 walkback (2026-05-17) ---------- Restored as named tokens after Pass 2 over-aggressively folded them into other families at perceptual distance d > 40. Each is distinct enough to warrant its own role. */ --info-steel-mid: #4a8b98; /* 17 uses — steel-blue mid (between deep + soft) */ --info-slate-dark: #4a6173; /* 6 uses — dark slate-blue */ --info-aqua: #4aa0cf; /* 2 uses — bright aqua/cyan accent */ --ink-cool-grey-pale: #a3c2ce; /* 40 uses — pale cool grey (lighter than ink-cool-grey) */ --ink-cool-grey-mid: #557086; /* 12 uses — mid blue-grey */ --accent-purple-bright: #7c3aed; /* 2 uses — bright purple accent */ --accent-purple-lavender: #8a7bc5; /* 2 uses — lavender purple */ --gold-pure: #fde047; /* 3 uses — pure bright yellow-gold */ --gold-saturated: #c68200; /* 2 uses — saturated orange-gold */ --gold-tier-darker: #5a3a08; /* 5 uses — darkest tier gold/bronze */ /* ---------- Insights: semantic stance + signal palette ---------- Phase 13F (2026-05-16). The /insights dashboard uses these for stance pills, lifecycle tiers, hype/evidence quadrants, etc. ALL values are aliases of canonical palette tokens above — no new hex literals introduced. Always pair the color with a text label; hue alone is never the signal. */ --insights-bullish-bg: color-mix(in srgb, var(--positive-bg-bright) 32%, var(--surface-white)); /* stronger green chip */ --insights-bullish-text: var(--brand-deep); /* deeper green for parity with bearish */ --insights-bullish-line: var(--positive-border-dark); /* #1f6b49 */ --insights-bearish-bg: var(--danger-border-soft); /* #ecc6bf */ --insights-bearish-text: var(--danger-text-deep); /* #7a2e18 */ --insights-bearish-line: var(--danger-bg-bright); /* #8c341d */ --insights-mixed-bg: var(--warning-border-soft); /* #f0d6a3 */ --insights-mixed-text: var(--brand-bronze); /* #7a4d0a */ --insights-mixed-line: var(--gold-accent); /* #b9892f */ --insights-contentious-bg: var(--accent-purple-surface-pale); /* #f3eef8 */ --insights-contentious-text: var(--accent-purple-text-deep); /* #5827a8 */ --insights-contentious-line: var(--accent-purple-border-soft); /* #b9a5dc */ --insights-hype-bg: var(--surface-warm); /* #fff4e2 */ --insights-hype-text: var(--brand-bronze); /* #7a4d0a */ --insights-hype-line: var(--gold-accent); /* #b9892f */ --insights-evidence-bg: var(--info-blue-surface-pale); /* #e1edf5 */ --insights-evidence-text: var(--info-blue-border-dark); /* #3d6a85 */ --insights-evidence-line: var(--info-blue-border-dark); /* #3d6a85 */ --insights-quiet-bg: var(--surface-pale-cool); /* #eaf3f6 */ --insights-quiet-text: var(--ink-muted); /* #6a7782 */ --insights-quiet-line: var(--border-mid); /* #bfc8cd */ /* ---------- Compatibility aliases ---------- Older base.css token names. Keep both working so existing CSS that uses them doesn't break. New code should prefer the names above. */ --text-main: var(--ink-navy); --text-muted: var(--ink-muted); --border-soft: var(--border-warm-soft); --border-strong: var(--border-cool); --surface-bg: rgba(255, 255, 255, 0.92); --surface-muted: var(--surface-warm); }