/* ════════════════════════════════════════════════════════════════════════ DealIQ design tokens — ported from MarketIQ (full 12-theme catalog). Categories surfaced in the picker: Family → navy Cool Dark → slate, charcoal Warm Dark → gruvbox, sepia Nature → forestdeep, ocean Designer → plum, mocha Brand → myplace, myplacedusk Daylight → parchment Selected via . Source brand: C:\Users\mattl\MarketIQ\brand_guide_revamp_V4.pdf Backward-compat aliases at the bottom map DealIQ's pre-port var names (--text-primary, --accent-blue, etc.) to the new MarketIQ token set. ──────────────────────────────────────────────────────────────────────── */ /* Default — Midnight Navy · AssetIQ family */ :root, html.theme-navy { /* Retuned 2026-05-18 to Apache-Junction palette per Matt: page bg RGB 15 / 26 / 46 (#0F1A2E) card bg RGB 27 / 42 / 72 (#1B2A48) plus terracotta + gold accents replacing the prior cyan + gold. */ --bg-0: #0F1A2E; --bg-1: #1B2A48; --bg-2: #243558; --bg-3: #2F4068; --bg-4: #3D5078; --line: #2A3A55; --line-soft: #233048; --line-strong: #3D5078; --text-0: #E8ECF5; --text-1: #C5CEE0; --text-2: #93A1B8; --text-3: #8A96AD; /* a11y: lifted from #6B7892 (~3.9:1 fail) to meet WCAG AA on bg-0/bg-1 (tabs, muted, lifecycle labels) */ --accent: #C26B4A; /* terracotta primary */ --gold: #D4A14A; --positive: #6FB98F; --negative: #D76B6B; --warn: #E2B85B; --info: #D98664; /* terra-2 lighter for info chips */ --purple: #A78BFA; --myplace-blue: #63C0DA; --myplace-yellow: #F7EC1D; --f-d: 'Fraunces', Georgia, serif; --f-u: 'DM Sans', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: none; --noise-opacity: 0; --row-hover: rgba(194, 107, 74, 0.08); --grid-soft: rgba(232, 235, 242, 0.05); --kpi-tint: rgba(194, 107, 74, 0.10); } html.theme-slate { --bg-0: #1c2230; --bg-1: #232a3b; --bg-2: #2c3447; --bg-3: #353e54; --bg-4: #4a5470; --line: #353e54; --line-soft: #2c3447; --line-strong: #4a5470; --text-0: #f0f3fa; --text-1: #d4d8e0; --text-2: #9aa2b9; --text-3: #8992a6; --accent: #7ba3d4; --gold: #e8c876; --positive: #6abf8a; --negative: #d97070; --warn: #f0b860; --info: #6fa8d6; --purple: #a78bfa; --myplace-blue: #63c0da; --myplace-yellow: #f7ec1d; --f-d: 'Fraunces', Georgia, serif; --f-u: 'DM Sans', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: none; --noise-opacity: 0; --row-hover: rgba(232, 200, 118, 0.06); --grid-soft: rgba(240, 243, 250, 0.05); --kpi-tint: rgba(232, 200, 118, 0.07); } html.theme-charcoal { --bg-0: #1a1a1c; --bg-1: #232325; --bg-2: #2a2a2d; --bg-3: #353537; --bg-4: #45454a; --line: #353537; --line-soft: #2a2a2d; --line-strong: #525258; --text-0: #ffffff; --text-1: #ededee; --text-2: #a8a8ac; --text-3: #8b8b8e; --accent: #a8b8d4; --gold: #f5d97a; --positive: #6cd29a; --negative: #ef6464; --warn: #f5c560; --info: #6fa8d6; --purple: #b89ce8; --myplace-blue: #63c0da; --myplace-yellow: #f7ec1d; --f-d: 'Fraunces', Georgia, serif; --f-u: 'DM Sans', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: none; --noise-opacity: 0; --row-hover: rgba(245, 217, 122, 0.05); --grid-soft: rgba(255, 255, 255, 0.04); --kpi-tint: rgba(245, 217, 122, 0.06); } html.theme-gruvbox { --bg-0: #282828; --bg-1: #32302f; --bg-2: #3c3836; --bg-3: #504945; --bg-4: #665c54; --line: #504945; --line-soft: #3c3836; --line-strong: #7c6f64; --text-0: #fbf1c7; --text-1: #ebdbb2; --text-2: #d5c4a1; --text-3: #a89984; --accent: #83a598; --gold: #d79921; --positive: #b8bb26; --negative: #fb4934; --warn: #fe8019; --info: #8ec07c; --purple: #d3869b; --myplace-blue: #83a5b8; --myplace-yellow: #fabd2f; --f-d: 'Fraunces', Georgia, serif; --f-u: 'DM Sans', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: none; --noise-opacity: 0; --row-hover: rgba(215, 153, 33, 0.07); --grid-soft: rgba(251, 241, 199, 0.04); --kpi-tint: rgba(215, 153, 33, 0.08); } html.theme-sepia { --bg-0: #262220; --bg-1: #34302c; --bg-2: #3d3833; --bg-3: #4a443e; --bg-4: #5d5448; --line: #4a443e; --line-soft: #3d3833; --line-strong: #6e6256; --text-0: #f8f0e0; --text-1: #ece4d3; --text-2: #c4b9a4; --text-3: #a0988c; --accent: #c89172; --gold: #cc7a4a; --positive: #a8b87a; --negative: #d97058; --warn: #e0a050; --info: #b8a890; --purple: #b894a8; --myplace-blue: #8eb5c8; --myplace-yellow: #e8d05a; --f-d: 'Fraunces', Georgia, serif; --f-u: 'DM Sans', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: none; --noise-opacity: 0; --row-hover: rgba(204, 122, 74, 0.07); --grid-soft: rgba(248, 240, 224, 0.04); --kpi-tint: rgba(204, 122, 74, 0.07); } html.theme-forestdeep { --bg-0: #1d2a22; --bg-1: #25342c; --bg-2: #2a3a30; --bg-3: #354840; --bg-4: #4a5e54; --line: #354840; --line-soft: #2a3a30; --line-strong: #5a6e62; --text-0: #f0f6ec; --text-1: #e3ebdf; --text-2: #b3c4ad; --text-3: #909d8c; --accent: #7a9b7a; --gold: #c8a85a; --positive: #8fc88a; --negative: #d97070; --warn: #d4a050; --info: #84b4b8; --purple: #a890c0; --myplace-blue: #7eb8a8; --myplace-yellow: #d4c850; --f-d: 'Fraunces', Georgia, serif; --f-u: 'DM Sans', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: none; --noise-opacity: 0; --row-hover: rgba(200, 168, 90, 0.06); --grid-soft: rgba(240, 246, 236, 0.04); --kpi-tint: rgba(200, 168, 90, 0.07); } html.theme-ocean { --bg-0: #0e2a35; --bg-1: #143a48; --bg-2: #194658; --bg-3: #245567; --bg-4: #346a82; --line: #245567; --line-soft: #194658; --line-strong: #3e7a8e; --text-0: #ecf3f5; --text-1: #dde8ec; --text-2: #98b4bf; --text-3: #8aa3ad; --accent: #5ab2c4; --gold: #e8c876; --positive: #5fc8a8; --negative: #e07a7a; --warn: #f0b860; --info: #88c4dc; --purple: #a8a0e0; --myplace-blue: #63c0da; --myplace-yellow: #f7ec1d; --f-d: 'Fraunces', Georgia, serif; --f-u: 'DM Sans', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: none; --noise-opacity: 0; --row-hover: rgba(90, 178, 196, 0.07); --grid-soft: rgba(236, 243, 245, 0.04); --kpi-tint: rgba(90, 178, 196, 0.08); } html.theme-plum { --bg-0: #241c2e; --bg-1: #2d2438; --bg-2: #322840; --bg-3: #3e324f; --bg-4: #524168; --line: #3e324f; --line-soft: #322840; --line-strong: #5d4d6f; --text-0: #f4eef8; --text-1: #e8e0ec; --text-2: #b8a8c4; --text-3: #968ca0; --accent: #b894d4; --gold: #d49ab0; --positive: #8ad29a; --negative: #e07a8a; --warn: #ecb050; --info: #a8b0d4; --purple: #c8a8e0; --myplace-blue: #94c0d4; --myplace-yellow: #ecd890; --f-d: 'Fraunces', Georgia, serif; --f-u: 'DM Sans', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: none; --noise-opacity: 0; --row-hover: rgba(212, 154, 176, 0.06); --grid-soft: rgba(244, 238, 248, 0.04); --kpi-tint: rgba(212, 154, 176, 0.07); } html.theme-mocha { --bg-0: #1e1e2e; --bg-1: #28283c; --bg-2: #313244; --bg-3: #3a3c54; --bg-4: #4d4f6d; --line: #3a3c54; --line-soft: #313244; --line-strong: #585b75; --text-0: #ecedfb; --text-1: #cdd6f4; --text-2: #a0a8c8; --text-3: #8c91a6; --accent: #89b4fa; --gold: #f9e2af; --positive: #a6e3a1; --negative: #f38ba8; --warn: #fab387; --info: #74c7ec; --purple: #cba6f7; --myplace-blue: #94e2d5; --myplace-yellow: #f9e2af; --f-d: 'Fraunces', Georgia, serif; --f-u: 'DM Sans', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: none; --noise-opacity: 0; --row-hover: rgba(203, 166, 247, 0.06); --grid-soft: rgba(236, 237, 251, 0.04); --kpi-tint: rgba(203, 166, 247, 0.07); } /* MyPlace Storefront — official light brand */ html.theme-myplace { --bg-0: #ffffff; --bg-1: #f5f6f7; --bg-2: #e8eaeb; --bg-3: #dadcdd; --bg-4: #c2c5c7; --line: #d8dadc; --line-soft: #e6e8e9; --line-strong: #76797B; --text-0: #231F20; --text-1: #2c2829; --text-2: #5a5d5f; --text-3: #6d7072; --accent: #63C0DA; --gold: #c89e08; --positive: #1f7a3e; --negative: #b91a13; --warn: #c47b14; --info: #2a6fa8; --purple: #6b4988; --myplace-blue: #63C0DA; --myplace-yellow: #F7EC1D; --f-d: 'Roboto Slab', Georgia, serif; --f-u: 'Inter', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --f-sub: 'Jost', system-ui, sans-serif; --panel-shadow: 0 1px 2px rgba(35, 31, 32, 0.06); --noise-opacity: 0; --row-hover: rgba(99, 192, 218, 0.08); --grid-soft: rgba(35, 31, 32, 0.04); --kpi-tint: rgba(99, 192, 218, 0.06); } /* MyPlace Dusk — brand dark */ html.theme-myplacedusk { --bg-0: #26212a; --bg-1: #332e30; --bg-2: #3a3438; --bg-3: #463f43; --bg-4: #5a5256; --line: #463f43; --line-soft: #3a3438; --line-strong: #76797B; --text-0: #ffffff; --text-1: #dcdcdc; --text-2: #a0a3a5; --text-3: #969899; --accent: #63C0DA; --gold: #F7EC1D; --positive: #6fd4a8; --negative: #f47272; --warn: #f7b860; --info: #7fcde4; --purple: #b894d4; --myplace-blue: #63C0DA; --myplace-yellow: #F7EC1D; --f-d: 'Roboto Slab', Georgia, serif; --f-u: 'Inter', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --f-sub: 'Jost', system-ui, sans-serif; --panel-shadow: none; --noise-opacity: 0; --row-hover: rgba(99, 192, 218, 0.08); --grid-soft: rgba(255, 255, 255, 0.05); --kpi-tint: rgba(247, 236, 29, 0.06); } /* StorLogic Ink — parent brand · BRAND_STYLE_GUIDE_v1.md §2.1 */ html.theme-storlogic { --bg-0: #0E0E10; /* --storlogic-ink */ --bg-1: #17171b; --bg-2: #2C2C30; /* --storlogic-graphite */ --bg-3: #34343a; --bg-4: #44444c; --line: #2a2a31; --line-soft: #1f1f24; --line-strong: #44444c; --text-0: #F4F1EA; /* --storlogic-bone */ --text-1: #d8d5cd; /* --storlogic-mist */ --text-2: #8a857a; --text-3: #85817c; --accent: #C9A24B; /* --storlogic-gold */ --gold: #C9A24B; --positive: #5fc89a; --negative: #d97070; --warn: #e8a850; --info: #88b8e0; --purple: #b894d4; --myplace-blue: #63c0da; --myplace-yellow: #f7ec1d; --f-d: 'Inter', system-ui, sans-serif; --f-u: 'Inter', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: none; --noise-opacity: 0; --row-hover: rgba(201, 162, 75, 0.07); --grid-soft: rgba(244, 241, 234, 0.04); --kpi-tint: rgba(201, 162, 75, 0.08); } /* DealIQ Cobalt — DealIQ module brand on StorLogic ink. 2026-06-20: Matt selected Cobalt #1E50C8 over the brand-guide's nominal crimson. Rationale — "reclaim blue": a saturated, energetic operator-blue that is the deliberate OPPOSITE of IntApp Properties' muted clinical institutional blue. Decisive, intelligent, ownable. Supersedes #8B1A1A. */ html.theme-dealiq { --bg-0: #0E0E10; --bg-1: #0f131c; /* cool cobalt tint */ --bg-2: #141a2c; --bg-3: #1a2340; --bg-4: #233056; --line: #1a2238; --line-soft: #121726; --line-strong: #2a3a64; --text-0: #EEF2FE; /* pale cobalt-white */ --text-1: #cdd6ee; --text-2: #8b95b3; --text-3: #767e98; --accent: #1E50C8; /* DealIQ Cobalt — reclaimed operator-blue (anti-IntApp) */ --gold: #C9A24B; /* keep StorLogic gold for cross-module continuity */ --positive: #5fc89a; --negative: #d97070; --warn: #e8a850; --info: #7fb0e8; /* nudged lighter so info chips read distinct from the cobalt accent */ --purple: #b894d4; --myplace-blue: #63c0da; --myplace-yellow: #f7ec1d; --f-d: 'Inter', system-ui, sans-serif; --f-u: 'Inter', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: none; --noise-opacity: 0; --row-hover: rgba(30, 80, 200, 0.08); --grid-soft: rgba(238, 242, 254, 0.04); --kpi-tint: rgba(30, 80, 200, 0.07); } /* Parchment — editorial light cream */ html.theme-parchment { --bg-0: #f0e8d6; --bg-1: #fbf6e6; --bg-2: #ece2c8; --bg-3: #e0d4b6; --bg-4: #c8b896; --line: #d8cba8; --line-soft: #e6dcc4; --line-strong: #8c7a52; --text-0: #1a1a1a; --text-1: #2a2a2a; --text-2: #5e5648; --text-3: #716750; --accent: #2c5282; --gold: #7a5520; --positive: #2f6b3a; --negative: #8a2418; --warn: #a86a14; --info: #3a6e9c; --purple: #6b4988; --myplace-blue: #2a8aa6; --myplace-yellow: #b8a418; --f-d: 'Fraunces', Georgia, serif; --f-u: 'DM Sans', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: 0 1px 0 rgba(26, 26, 26, 0.05); --noise-opacity: 0.03; --row-hover: rgba(122, 85, 32, 0.07); --grid-soft: rgba(26, 26, 26, 0.05); --kpi-tint: rgba(122, 85, 32, 0.07); } /* ════════════════════════════════════════════════════════════════════════ 2026-06-21 — theme-lab-2 additions (6 new themes). Gallery: theme-lab-2.html Contract: full token set per block. Contrast checked WCAG AA (--text-1 on --bg-1 >= 4.5:1; --text-0 on --bg-0 strong). ──────────────────────────────────────────────────────────────────────── */ /* Daybreak — clean light · Linear/Notion daylight · cobalt accent. The default-grade LIGHT theme: near-white surfaces, ink text, restrained. */ html.theme-daybreak { --bg-0: #e8edf4; --bg-1: #ffffff; --bg-2: #f1f4f9; --bg-3: #e2e8f1; --bg-4: #ccd4e1; --line: #cfd7e3; --line-soft: #e4e9f1; --line-strong: #9aa6b8; --text-0: #111521; --text-1: #29313e; --text-2: #4b5360; --text-3: #636a78; --accent: #1f50e6; --gold: #8f5e00; --positive: #167a3f; --negative: #c81f1f; --warn: #ac6800; --info: #1f63cc; --purple: #6a3fd0; --myplace-blue: #137f9e; --myplace-yellow: #8f7300; --f-d: 'Fraunces', Georgia, serif; --f-u: 'DM Sans', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: 0 1px 2px rgba(21, 24, 31, 0.06); --noise-opacity: 0; --row-hover: rgba(31, 80, 230, 0.10); --grid-soft: rgba(17, 21, 33, 0.07); --kpi-tint: rgba(31, 80, 230, 0.10); } /* Linen — warm light · soft cream paper · amber accent. The cozy daylight option: warm-white surfaces, espresso text, no glare. */ html.theme-linen { --bg-0: #efe5d3; --bg-1: #fffdf8; --bg-2: #f6efe1; --bg-3: #ebe0cb; --bg-4: #d6c5a4; --line: #dbcdb2; --line-soft: #ece1cd; --line-strong: #ab9570; --text-0: #1b1509; --text-1: #3f3724; --text-2: #645840; --text-3: #72644c; --accent: #bd5a0f; --gold: #8a6308; --positive: #266c34; --negative: #a51f12; --warn: #a8650c; --info: #1f6694; --purple: #6a4496; --myplace-blue: #1a7790; --myplace-yellow: #8c7000; --f-d: 'Fraunces', Georgia, serif; --f-u: 'DM Sans', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: 0 1px 2px rgba(31, 26, 20, 0.05); --noise-opacity: 0; --row-hover: rgba(189, 90, 15, 0.10); --grid-soft: rgba(27, 21, 9, 0.07); --kpi-tint: rgba(189, 90, 15, 0.10); } /* Graphite — neutral dark · pure cool greyscale · cobalt accent. GitHub-dark sensibility: true-neutral surfaces, no color cast, low fatigue. */ html.theme-graphite { --bg-0: #161719; --bg-1: #1e2023; --bg-2: #26282c; --bg-3: #303237; --bg-4: #42454c; --line: #303237; --line-soft: #26282c; --line-strong: #4d5158; --text-0: #f4f5f7; --text-1: #cbcdd3; --text-2: #9499a2; --text-3: #858890; --accent: #7fa0e0; --gold: #e8c876; --positive: #5fc88a; --negative: #e07070; --warn: #e6b45a; --info: #74b0e0; --purple: #b89ce8; --myplace-blue: #63c0da; --myplace-yellow: #f7ec1d; --f-d: 'Fraunces', Georgia, serif; --f-u: 'DM Sans', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: none; --noise-opacity: 0; --row-hover: rgba(127, 160, 224, 0.07); --grid-soft: rgba(244, 245, 247, 0.04); --kpi-tint: rgba(127, 160, 224, 0.07); } /* Cobalt Deep — deep cobalt dark · DealIQ brand at full saturation. The flagship dark: midnight-cobalt surfaces, energetic operator-blue accent. */ html.theme-cobaltdeep { --bg-0: #0a1020; --bg-1: #101a33; --bg-2: #16223f; --bg-3: #1e2d50; --bg-4: #2b3e6c; --line: #1e2d50; --line-soft: #15203d; --line-strong: #32477a; --text-0: #eef2fe; --text-1: #c2cdec; --text-2: #8e9ac0; --text-3: #7883a6; --accent: #4d7bf0; --gold: #e6c272; --positive: #5fcb9a; --negative: #ec7070; --warn: #ecb45a; --info: #76b4ec; --purple: #ab94ec; --myplace-blue: #63c0da; --myplace-yellow: #f7ec1d; --f-d: 'Fraunces', Georgia, serif; --f-u: 'DM Sans', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: none; --noise-opacity: 0; --row-hover: rgba(77, 123, 240, 0.09); --grid-soft: rgba(238, 242, 254, 0.04); --kpi-tint: rgba(77, 123, 240, 0.08); } /* Fog — cool light-gray · airy daylight · cobalt accent. The soft-light alternative to Daybreak: muted blue-gray surfaces, gentle. */ html.theme-fog { --bg-0: #d9e1ec; --bg-1: #f5f8fc; --bg-2: #e6ecf4; --bg-3: #d2dbe8; --bg-4: #b6c2d3; --line: #c4cedd; --line-soft: #dbe3ee; --line-strong: #94a2b6; --text-0: #131822; --text-1: #29313f; --text-2: #4b5564; --text-3: #5a6372; --accent: #2a55db; --gold: #875e00; --positive: #1a7342; --negative: #bf2020; --warn: #a66600; --info: #2560c2; --purple: #5b3ec4; --myplace-blue: #167e98; --myplace-yellow: #8a7000; --f-d: 'Fraunces', Georgia, serif; --f-u: 'DM Sans', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: 0 1px 2px rgba(26, 29, 36, 0.05); --noise-opacity: 0; --row-hover: rgba(42, 85, 219, 0.10); --grid-soft: rgba(19, 24, 34, 0.07); --kpi-tint: rgba(42, 85, 219, 0.10); } /* Liberty — 4th of July · seasonal · navy base, restrained red + white + blue. Patriotic but not garish: deep-navy surfaces, a single muted-crimson accent, cool-blue info, pale-white text. One flag's worth of color, not a parade. */ html.theme-liberty { --bg-0: #0b1a33; --bg-1: #122544; --bg-2: #182f52; --bg-3: #213a63; --bg-4: #2f4d7e; --line: #213a63; --line-soft: #182f52; --line-strong: #3a578a; --text-0: #f3f6fc; --text-1: #cdd8ec; --text-2: #93a4c2; --text-3: #7e8ea9; --accent: #c7324a; /* old-glory red, desaturated for legibility on navy */ --gold: #e3c168; --positive: #5fc890; --negative: #e06a78; --warn: #e6b25a; --info: #6ea8e6; /* old-glory blue, lifted for chip legibility */ --purple: #a892dc; --myplace-blue: #63c0da; --myplace-yellow: #f7ec1d; --f-d: 'Fraunces', Georgia, serif; --f-u: 'DM Sans', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: none; --noise-opacity: 0; --row-hover: rgba(199, 50, 74, 0.08); --grid-soft: rgba(243, 246, 252, 0.05); --kpi-tint: rgba(199, 50, 74, 0.07); } /* Institutional Dark — finance-terminal: deep ink-navy, crisp high-contrast text, institutional blue accent + restrained gold. Pairs with instlight. */ html.theme-instdark { --bg-0: #0a101c; --bg-1: #111a2b; --bg-2: #16213a; --bg-3: #1f2d49; --bg-4: #2b3d60; --line: #26375a; --line-soft: #18233b; --line-strong: #3d557e; --text-0: #f4f7fd; --text-1: #d6deee; --text-2: #97a4be; --text-3: #76849e; --accent: #4f86f7; /* institutional blue, lifted for AA contrast on ink */ --gold: #c9a24b; --positive: #51c389; --negative: #e0726f; --warn: #e3a857; --info: #6fb0e8; --purple: #b18fe0; --myplace-blue: #63c0da; --myplace-yellow: #f7ec1d; --f-d: 'Inter', system-ui, sans-serif; --f-u: 'Inter', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: none; --noise-opacity: 0; --row-hover: rgba(79, 134, 247, 0.10); --grid-soft: rgba(244, 247, 253, 0.05); --kpi-tint: rgba(79, 134, 247, 0.08); } /* Institutional Light — crisp white cards on cool gray, near-navy ink text (AA+ contrast), cobalt accent. The professional light scheme. */ html.theme-instlight { --bg-0: #e7ecf2; --bg-1: #ffffff; --bg-2: #f3f6f9; --bg-3: #e8edf3; --bg-4: #d3dbe6; --line: #d2dae5; --line-soft: #e8edf3; --line-strong: #93a1b6; --text-0: #0e1b2e; --text-1: #1d2c42; --text-2: #4f5f79; --text-3: #5e6a7c; --accent: #1E50C8; /* DealIQ cobalt */ --gold: #8a6a18; --positive: #1c7a3e; --negative: #b3261e; --warn: #b07a0e; --info: #2e6cc2; --purple: #6b4988; --myplace-blue: #1f7fa0; --myplace-yellow: #a8951a; --f-d: 'Inter', system-ui, sans-serif; --f-u: 'Inter', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: 0 1px 2px rgba(14, 27, 46, 0.06); --noise-opacity: 0; --row-hover: rgba(30, 80, 200, 0.06); --grid-soft: rgba(14, 27, 46, 0.07); --kpi-tint: rgba(30, 80, 200, 0.05); } /* Clarity — high-contrast everyday light. Near-black text on bright white, vivid blue accent. The "actually readable" light theme. */ html.theme-clarity { --bg-0: #eceff3; --bg-1: #ffffff; --bg-2: #f6f8fa; --bg-3: #eaeef2; --bg-4: #d7dde5; --line: #d6dce4; --line-soft: #eaeef2; --line-strong: #8c99a9; --text-0: #12161d; --text-1: #222a34; --text-2: #556374; --text-3: #626d79; --accent: #0f5fd6; /* vivid, AA on white */ --gold: #8a6a18; --positive: #197d40; --negative: #c02a22; --warn: #b07a0e; --info: #2e6cc2; --purple: #6b4988; --myplace-blue: #1f7fa0; --myplace-yellow: #a8951a; --f-d: 'Fraunces', Georgia, serif; --f-u: 'DM Sans', system-ui, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace; --panel-shadow: 0 1px 2px rgba(18, 22, 29, 0.06); --noise-opacity: 0; --row-hover: rgba(15, 95, 214, 0.06); --grid-soft: rgba(18, 22, 29, 0.07); --kpi-tint: rgba(15, 95, 214, 0.05); } /* Parchment-only paper noise overlay */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: var(--noise-opacity, 0); z-index: 100; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } html, body { background: var(--bg-0); color: var(--text-1); font-family: var(--f-u); transition: background-color 280ms ease, color 280ms ease; } @media (prefers-reduced-motion: reduce) { html, body { transition: none; } } /* ── Backward-compat aliases — DealIQ's pre-port var names ────────────── */ :root { --text-primary: var(--text-0); --text-secondary: var(--text-1); --text-tertiary: var(--text-3); --accent-blue: var(--accent); --accent-amber: var(--gold); --border: var(--line-soft); --border-strong: var(--line-strong); --warning: var(--warn); --font-serif: var(--f-d); --font-mono: var(--f-m); --font-sans: var(--f-u); --accent-blue-tint: color-mix(in srgb, var(--accent) 10%, transparent); --accent-blue-edge: color-mix(in srgb, var(--accent) 35%, transparent); --positive-tint: color-mix(in srgb, var(--positive) 10%, transparent); --negative-tint: color-mix(in srgb, var(--negative) 10%, transparent); --warning-tint: color-mix(in srgb, var(--warn) 10%, transparent); } /* ════════════════════════════════════════════════════════════════════════ Theme picker — verbatim from MarketIQ ──────────────────────────────────────────────────────────────────────── */ .theme-picker { position: relative; } .theme-picker-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); background: var(--bg-1); border-radius: 8px; font-family: var(--f-u); font-size: 13px; color: var(--text-1); cursor: pointer; transition: background 150ms, border-color 150ms; } .theme-picker-trigger:hover { background: var(--bg-2); border-color: var(--line-strong); } .theme-picker-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-picker-swatches { display: inline-flex; gap: 2px; } .theme-picker-swatch { width: 10px; height: 16px; border-radius: 1px; } .theme-picker-menu { position: absolute; top: calc(100% + 6px); right: 0; width: 320px; max-height: 70vh; overflow-y: auto; background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; padding: 8px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32); z-index: 1100; } .theme-picker-section { margin-bottom: 4px; } .theme-picker-section + .theme-picker-section { margin-top: 8px; } .theme-picker-section-label { font-family: var(--f-m); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); padding: 6px 10px 4px; } .theme-picker-option { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; cursor: pointer; background: transparent; border: none; width: 100%; text-align: left; color: var(--text-1); transition: background 120ms; } .theme-picker-option:hover { background: var(--bg-2); } .theme-picker-option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .theme-picker-option.selected { background: var(--bg-2); } .theme-picker-option-swatches { display: inline-flex; gap: 2px; flex-shrink: 0; } .theme-picker-option-swatch { width: 14px; height: 22px; border-radius: 2px; border: 1px solid var(--line); } .theme-picker-option-text { flex: 1; min-width: 0; } .theme-picker-option-label { font-family: var(--f-d); font-size: 14px; color: var(--text-0); letter-spacing: -0.005em; font-weight: 600; } .theme-picker-option-tagline { font-size: 12px; color: var(--text-2); margin-top: 2px; line-height: 1.4; } .theme-picker-option-check { color: var(--gold); font-size: 14px; flex-shrink: 0; }