/* ChipFlip — theme tokens (light/dark) Single source of truth for every color token the rest of the site's CSS consumes, keyed off the [data-theme] attribute static/js/theme-gate.js sets on before first paint (see that file's own comment for why it has to run blocking, before this stylesheet's values can even be read). Loaded FIRST, before fonts.css/scanner.css/layout.css/site.css/ landing.css — none of those declare their own colors anymore, they only consume var(--...) references into this file. Both naming schemes that existed before this file (site.css's --text-primary/ --bg-* family and layout.css's --cf-* family) are kept and pointed at the same underlying value per theme, rather than doing a risky mass-rename of every var(--...) reference across the whole codebase. Dark palette is a designed proposal, approved against reports/dark-mode-mockup-v1.html (Fable design pass, 2026-07-16) — NOT a mechanical inversion of the light values. Design principles (see that file's own comment for the full writeup): 1. Dark surfaces are built from the brand indigo hue (#2E3C56, hue 219), not neutral gray/black. 2. Four-tier elevation ladder (page/card/inset/hover) replaces light mode's shadow-based elevation, since shadows die on dark backgrounds. 3. Every accent is re-tuned for the darker canvas, not reused — light mode's green/ochre were darkened specifically for white; dark gets its own luminance-lifted variant, each verified >=4.5:1 on the card surface. 4. Warm moments (scalp badge, warning banner, deal highlight) stay warm (deep ambers), not desaturated to gray. 5. The indigo topbar and landing trust band are fixed brand furniture — same color in both themes, only the embedded search field adapts. */ :root[data-theme="light"] { /* ---- Semantic surfaces/text/accents (unchanged from the pre-dark-mode site — light mode is not touched by this pass) ---- */ --cf-platinum: #EAECEE; --bg: var(--cf-platinum); --cf-white: #FFFFFF; --bg-raised: var(--cf-white); --bg-card: var(--cf-white); --cf-alabaster:#E5E0DC; --border: var(--cf-alabaster); --border-soft: var(--cf-alabaster); --cf-border-strong: #D8D2CC; --cf-inset: var(--cf-platinum); --cf-hover: var(--cf-alabaster); --cf-indigo: #2E3C56; --text-primary: var(--cf-indigo); --text-secondary: #4B5873; /* 7.14:1 on white */ --text-muted: #64708A; /* 4.97:1 on white */ --cf-blue: #378ADD; --new: var(--cf-blue); --cf-green: #12823B; --used: var(--cf-green); --cf-red: #DC2626; --danger: var(--cf-red); --cf-ochre: #AB620F; --margin: var(--cf-ochre); --cf-purple:#6D5DAA; --cf-blaze: #FF5E07; /* ---- Screener/table surface tiers (scanner.css) — light mode matches what .cf-screener-overlay's own remap already produced before this file existed; kept identical on purpose. ---- */ --bg0: var(--cf-platinum); --bg1: var(--cf-white); --bg2: var(--cf-platinum); --bg3: var(--cf-alabaster); --border2: var(--cf-alabaster); --tx0: var(--cf-indigo); --tx1: rgba(46, 60, 86, .68); --tx2: rgba(46, 60, 86, .5); /* ---- One-off tokens for what used to be hardcoded colors ---- */ --header-frost: rgba(234, 236, 238, 0.92); --btn-primary-hover: #1f2a3d; --banner-bg: #FCEEDD; --menu-shadow: rgba(46, 60, 86, .15); --scalp-badge-text: #663D08; --scalp-badge-bg: #FAEEDA; --verdict-bg: rgba(22, 163, 74, .08); --ctx-chip-below-bg: rgba(22, 163, 74, .12); --ctx-chip-above-bg: rgba(220, 38, 38, .10); --divider-soft: rgba(46, 60, 86, .3); --hairline: rgba(46, 60, 86, .08); --star-muted: rgba(46, 60, 86, .25); --deal-listing-bg: #FFF1E6; --overlay-scrim: rgba(46, 60, 86, .5); --feature-icon-blue-bg: rgba(55, 138, 221, .12); --feature-icon-green-bg: rgba(22, 163, 74, .12); --feature-icon-ochre-bg: rgba(208, 119, 18, .12); --feature-icon-indigo-bg: rgba(46, 60, 86, .09); --live-dot-ring: rgba(22, 163, 74, .18); --live-dot-ring-soft: rgba(22, 163, 74, .06); --proof-card-shadow: rgba(46, 60, 86, .12); /* ---- Topbar (mostly fixed — see the theme-constant block below — but the embedded search field is the one part of it that adapts) ---- */ --topbar-input-bg: #FFFFFF; --topbar-input-text: #2E3C56; --topbar-input-border: #2E3C56; /* ---- Scrollbar ---- */ --scrollbar-thumb: rgba(46, 60, 86, .25); --scrollbar-thumb-hover: rgba(46, 60, 86, .4); } :root[data-theme="dark"] { /* ---- Surfaces: indigo-hued elevation ladder, not neutral gray ---- */ --cf-platinum: #10141C; --bg: var(--cf-platinum); --cf-white: #171C27; --bg-raised: var(--cf-white); --bg-card: var(--cf-white); --cf-alabaster:#2A3245; --border: var(--cf-alabaster); --border-soft: var(--cf-alabaster); --cf-border-strong: #343D54; --cf-inset: #1C2230; --cf-hover: #232A3B; --cf-indigo: #E8ECF4; --text-primary: var(--cf-indigo); --text-secondary: #B0BACE; /* 8.74:1 on card */ --text-muted: #8591A8; /* 5.37:1 on card */ --cf-blue: #5B9EE6; --new: var(--cf-blue); /* 6.07:1 on card */ --cf-green: #3DBE6C; --used: var(--cf-green); /* 7.13:1 on card */ --cf-red: #EF6363; --danger: var(--cf-red); /* 5.39:1 on card */ --cf-ochre: #E0A458; --margin: var(--cf-ochre); /* 7.81:1 on card */ --cf-purple:#A491E8; /* 6.33:1 on card */ --cf-blaze: #FF6B1A; /* 5.98:1 on card */ /* ---- Screener/table surface tiers — same indigo elevation ladder as the rest of the dark theme, replacing scanner.css's old stand-alone near-black palette so the whole app shares one dark surface family. Text tiers now match the main text ladder (solid, not scanner.css's old separate grays). ---- */ --bg0: var(--cf-platinum); --bg1: var(--cf-white); --bg2: var(--cf-inset); --bg3: var(--cf-hover); --border2: var(--cf-border-strong); --tx0: var(--cf-indigo); --tx1: var(--text-secondary); --tx2: var(--text-muted); /* ---- One-off tokens — warm moments stay warm, not desaturated ---- */ --header-frost: rgba(16, 20, 28, 0.92); --btn-primary-hover: #d4dae8; --banner-bg: #33290F; --menu-shadow: rgba(0, 0, 0, .5); --scalp-badge-text: #EFC97E; --scalp-badge-bg: #3B2F15; --verdict-bg: rgba(61, 190, 108, .14); --ctx-chip-below-bg: rgba(61, 190, 108, .14); --ctx-chip-above-bg: rgba(239, 99, 99, .14); --divider-soft: rgba(232, 236, 244, .18); --hairline: rgba(232, 236, 244, .08); --star-muted: rgba(232, 236, 244, .2); --deal-listing-bg: #33210F; --overlay-scrim: rgba(0, 0, 0, .6); --feature-icon-blue-bg: rgba(91, 158, 230, .16); --feature-icon-green-bg: rgba(61, 190, 108, .16); --feature-icon-ochre-bg: rgba(224, 164, 88, .16); --feature-icon-indigo-bg: rgba(232, 236, 244, .08); --live-dot-ring: rgba(61, 190, 108, .25); --live-dot-ring-soft: rgba(61, 190, 108, .10); --proof-card-shadow: rgba(0, 0, 0, .35); /* ---- Topbar search field: the one part of the fixed indigo topbar that adapts (a light input pinned to a dark bar would look like a mistake, not a brand anchor). Border is its own, more muted token — using --topbar-input-text (bright, meant for reading) as a border too made it glow against the dark topbar. ---- */ --topbar-input-bg: #1C2230; --topbar-input-text: #B0BACE; --topbar-input-border: #343D54; /* ---- Scrollbar: same muted indigo family as everything else, not the OS default (which is light and stands out badly here). ---- */ --scrollbar-thumb: rgba(232, 236, 244, .16); --scrollbar-thumb-hover: rgba(232, 236, 244, .28); } /* ---- Theme-constant tokens ---- Two families that intentionally do NOT change with the theme: 1. Brand toolbar surfaces (.cf-topbar, .cf-screener-topbar, .cf-mso-top) keep their fixed indigo identity color in both themes, same as most products' colored title bars not inverting with page theme — they're brand furniture, not content chrome. The landing page's "trust" band is the same idea applied to marketing copy. 2. The Screener's raw condition-color palette (--c-new/--c-used/ etc.), the deal-badge orange, and the trend chip tints were already authored as fixed, self-contained colors before this file existed (scanner.css's condition colors were never remapped by .cf-screener-overlay's light shell, even in the site's original single-theme form) — kept exactly as they already render today, in both themes, rather than inventing an unrequested variant of a palette that was never theme-scoped to begin with. */ :root { --mono: 'IBM Plex Mono', 'Courier New', monospace; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --serif: 'Fraunces', Georgia, serif; --radius: 10px; --max-width: 1180px; --topbar-bg: #2E3C56; --topbar-text: #FFFFFF; --topbar-hover: rgba(255, 255, 255, .25); --trust-band-bg: #2E3C56; --trust-band-text: #EAECEE; --trust-band-heading: #FFFFFF; --trust-band-muted: rgba(234, 236, 238, .75); --c-new: #2a78d6; --c-used: #22c55e; --c-parts: #f5a623; --c-refurb: #8b5cf6; --c-scalp: #eab308; --c-down: #ef4444; --c-up: #22c55e; --c-flat: #4d5668; --deal-badge-color: #f97316; --trend-up-bg: rgba(34, 197, 94, .12); --trend-down-bg: rgba(239, 68, 68, .12); --deep-shadow: rgba(0, 0, 0, .4); } /* ---- Scrollbars ---- No custom styling existed before dark mode — the OS-default scrollbar happens to be light, which blended into the light page and was never noticed. On a dark page it's a bright, jarring bar. scrollbar-color covers Firefox; the ::-webkit-scrollbar-* rules cover Chrome/Edge/Safari. Applies globally (every scrollable box, not just the Screener/watchlist panels) since guide pages and the landing page scroll too. */ html { scrollbar-color: var(--scrollbar-thumb) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }