/* Bullet EV brand tokens — from the Brand Guide (September 2026). Light backgrounds, navy text, the gradient as an accent never a backdrop. Five colors: Navy #062141 · Cyan #13b3cf · Teal #23c2b7 · Green #43e285 · Off white #f7f7f7. Light is the brand default. Dark (navy panels) is an opt-in via . */ :root { /* ---------- brand constants ---------- */ --navy: #062141; --cyan: #13B3CF; --teal: #23C2B7; --green: #43E285; --offwhite: #F7F7F7; --gradient: linear-gradient(90deg, #062141 0%, #13B3CF 35%, #23C2B7 65%, #43E285 100%); --gradient-bright: linear-gradient(90deg, #13B3CF 0%, #23C2B7 50%, #43E285 100%); /* for strips on navy */ /* legacy aliases (older components) */ --bev-navy: var(--navy); --bev-blue: var(--cyan); --bev-teal: var(--teal); --bev-green: var(--green); --bev-green-teal: #31D0A1; --bev-gradient: var(--gradient); /* ---------- light theme (default) ---------- */ --ground: #F7F7F7; /* off white: page background behind white cards */ --surface: #FFFFFF; --surface-2: #F3F5F7; --surface-3: #E7EBEF; --line: #E2E7EC; --line-strong: #C6D0DA; --ink: #062141; /* navy does the talking */ --ink-2: #2E4460; --muted: #5F7186; --accent: #0E92AA; /* cyan, darkened for AA text on white; use var(--cyan) for fills/icons */ --accent-2: #178E87; /* teal, darkened for AA text */ --good: #158457; /* green is "not for text" on white — this is the text-safe stand-in */ --warn: #92660A; --crit: #B03030; --good-soft: #DDF5E8; --warn-soft: #F5EBCB; --crit-soft: #F7DDDA; --accent-soft: #DCF3F7; --focus: var(--teal); /* teal focus rings, per the guide */ --shadow: 0 1px 2px rgba(6, 33, 65, .05), 0 10px 28px -18px rgba(6, 33, 65, .22); --shadow-hover: 0 2px 4px rgba(6, 33, 65, .06), 0 14px 34px -16px rgba(35, 194, 183, .35); /* the navy header is navy in both themes */ --bar-bg: var(--navy); --bar-ink: #FFFFFF; --bar-muted: #A9BBD1; --bar-line: rgba(255, 255, 255, .16); --bar-hover: rgba(255, 255, 255, .08); } :root[data-theme="dark"] { --ground: #041B36; --surface: #062141; --surface-2: #0A2A4F; --surface-3: #10345C; --line: #163A64; --line-strong: #275180; --ink: #EEF3F8; --ink-2: #BCCBDC; --muted: #8296AE; --accent: #13B3CF; /* full-strength brights are text-safe on navy */ --accent-2: #23C2B7; --good: #43E285; --warn: #E2B33C; --crit: #F26D5F; --good-soft: #0C3A31; --warn-soft: #3A2F12; --crit-soft: #401C18; --accent-soft: #0A3450; --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px -16px rgba(0, 0, 0, .85); --shadow-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 14px 34px -16px rgba(35, 194, 183, .45); --bar-bg: #041B36; } * { box-sizing: border-box; } html { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.45; } /* The signature: a thin gradient strip along the very top of every page. */ body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient); z-index: 100; pointer-events: none; } /* Teal focus ring everywhere (keyboard + inputs) */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--teal) !important; } /* ---------- chart tokens (dataviz-validated 2026-08-26) ---------- Categorical = pipeline identity, fixed order by pipeline sort_order: 0 Meta Supercharger #1 · 1 CEV Superchargers · 2 Resi EV 3 CEV L2 Opportunities · 4 CEV L2 Service · 5 CEV Leads */ :root { --cat-0: #A83459; --cat-1: #96660A; --cat-2: #0B72A8; --cat-3: #B25320; --cat-4: #6D50D8; --cat-5: #1E7F45; --seq-1: #DCEEF2; --seq-2: #A5D5DF; --seq-3: #62AEBF; --seq-4: #2B7F94; --seq-5: #0B5568; --role-triage: #0B72A8; --role-active: #0E92AA; --role-parked: #92660A; --role-won: #158457; --role-lost: #B03030; --role-dead: #5F7186; } :root[data-theme="dark"] { --cat-0: #C1476B; --cat-1: #B08217; --cat-2: #1791B5; --cat-3: #B85A28; --cat-4: #8465E0; --cat-5: #2BAD6C; --seq-1: #0A3450; --seq-2: #14506B; --seq-3: #257287; --seq-4: #4A9DB1; --seq-5: #8ED2E2; --role-triage: #1791B5; --role-active: #13B3CF; --role-parked: #E2B33C; --role-won: #43E285; --role-lost: #F26D5F; --role-dead: #8296AE; } /* ---------- categorical series for stacked charts (labor) ---------- Reference dataviz palette, fixed order, validated adjacent-pair CVD/contrast in both modes (dataviz skill palette.md). Slot 9+ folds to "Other". */ :root { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948; --series-other: #9AA7B5; } :root[data-theme="dark"] { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767; --series-other: #6F7F92; }