/* --- TOKENS --- */ :root { /* SG-1 (Foundations, Commander 2026-08-19): the product is dark-only, so DARK is now the base palette on :root — a new component inherits dark tokens instead of starting light and needing a [data-theme="dark"] patch (the root cause of the cream cookie banner / white news card / invisible-border class of bug). The light palette moved to [data-theme="light"] below (dormant; nothing sets it). --line/--line-2 are now white-alpha (were black-alpha, invisible on #000). */ --bg:#000000; --bg-2:#0a0a0a; --line:rgba(255,255,255,0.09); --line-2:rgba(255,255,255,0.16); --surface:rgba(255,255,255,0.035); --surface-2:rgba(255,255,255,0.06); --surface-3:rgba(255,255,255,0.09); --border:rgba(255,255,255,0.09); --border-2:rgba(255,255,255,0.16); --text:#FFFFFF; --text-2:rgba(255,255,255,0.75); /* --muted / --dimmed carry real text; on #000 these pass WCAG AA (muted 0.55 = 6.25:1, dimmed 0.46 = 4.68:1) and keep the tier order under --text-2 (0.75). */ --muted:rgba(255,255,255,0.55); --dimmed:rgba(255,255,255,0.46); --faint:rgba(255,255,255,0.20); --warn:#FFB454; --green-grad:#8FE020; --green:#A8FF35; --green-bright:#A8FF35; --green-deep:#8FE020; --green-glow:rgba(168,255,53,0.4); --green-dim:rgba(168,255,53,0.10); /* dark scan card tokens (a dark tool on a light page) */ --card-bg:#101010; --card-line:rgba(255,255,255,0.10); --card-line-2:rgba(255,255,255,0.16); --card-surface:rgba(255,255,255,0.04); --card-text:#FFFFFF; --card-text-2:rgba(255,255,255,0.88); /* Legibility bump (Commander 2026-08-19): the scan / reveal card body + labels read too dim on near-black — every line but the bright headline was hard to read. Raised the supporting tiers for real contrast while keeping the hierarchy (text-2 > muted > dimmed): text-2 0.78->0.88, muted 0.55->0.72, dimmed 0.48->0.64. --card-dimmed still carries the 9px timing labels (".log .ms"); 0.64 is well clear of AA on --card-bg. White-on-dark in both themes. */ --card-muted:rgba(255,255,255,0.72); --card-dimmed:rgba(255,255,255,0.64); /* error / warning text for the dark scan card (BUG-305: was three divergent per-file literals invented in workspace-layout.css; centralized here at their exact current values, no visual change). Not overridden by the dark theme, so they render identically on every surface. */ --error:#ff6b6b; --error-soft:#ff7a7a; --error-warn:#ff8e8e; --error-bg:rgba(255,107,107,0.08); --error-border:rgba(255,107,107,0.2); /* Type system (Commander 2026-08-19): the WHOLE site defaults to Poppins (the rounder, softer "Google Sans" feel) — body, nav, footer, cards, buttons, all supporting copy. Only HEADLINES stay Inter, via --f-display + the global h1/h2/h3 rule in global.css. --f-sans is the default because the ~40 elements that reference it (buttons, inputs, cards, agent UI) are all "the rest of the site" and should be Poppins. */ --f-sans:"Poppins","Inter",-apple-system,sans-serif; /* default / body / UI — Poppins */ --f-display:"Inter",-apple-system,sans-serif; /* HEADLINES ONLY — Inter */ --f-num:-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* Eyebrow / label / "terminal-adjacent" accent font. Intentionally INTER, not a real monospace: the labels (role, status, log rows, section headers, sub-labels) read as clean tracked labels; a real monospace turned the whole scan card into a cheap Courier terminal (Commander rejected 2026-08-19, reverting UX-25). The right-aligned timing columns still line up via layout, not glyph width. */ --f-mono:"Inter",-apple-system,sans-serif; --f-lede:var(--f-sans); /* sub-text = default (Poppins); kept as an intent alias */ --t-hero:clamp(48px,7.8vw,104px); --t-section:clamp(34px,4.8vw,60px); /* UX-19 de-leak: --t-display / --t-title / --w-reg / --w-bold were declared in the [data-theme="dark"] block, which made SIZE + WEIGHT theme-dependent (they are not) and let --t-title carry TWO values. Consolidated to :root at the LIVE (dark) values — dark is the only theme that renders, so this is visually neutral; the dark block no longer overrides them. Consumed by workspace-layout.css. */ --t-display:clamp(26px,4.4vw,32px); --t-title:clamp(20px,2.8vw,23px); --t-body:16px; --t-micro:12px; --t-mono:11px; --w-reg:400; --w-bold:600; --maxw:1600px; /* SITE chrome + landing container (nav, footer, landing sections) */ --page-max:1080px; /* rebate-hub product surface */ /* INTERIOR page canvas — every inner page (about/blog/faq/contact/join/posts) matches the LANDING hero exactly (Commander directive 2026-08-19, supersedes the earlier 1280px §14 canvas): same container width, same 28px left spine, same top gap below the nav. Driven off these tokens so no page can drift. */ --canvas:var(--maxw); /* = landing container width (1600) */ --page-side:28px; /* = landing hero side padding (aligns the left edge to the landing) */ --page-top:292px; /* header -> title gap. Lands the interior title at the SAME height as the landing h1 (landing = 248px hero pad-top + its eyebrow block ~44px; interior pages have no eyebrow, so the title itself needs the full 292px to line up). */ --gutter:22px; /* Interior-page type scale (frontend v2 unification, Commander 2026-07-04). --t-hero / --t-section above stay the HOME (landing) display sizes — a defined role, not an exception. Every interior page consumes these: */ --t-page-hero:var(--t-hero); /* interior page heroes = the LANDING hero size exactly (Commander 2026-08-19). Font/weight/spacing already matched (Inter 800); this brings the SIZE up so about/blog/faq/contact/join headlines read identical to "Find every rebate your EV qualifies for." */ --t-post-title:clamp(30px,5vw,46px); /* article (blog post) headline */ --t-h2:22px; /* section headings */ --t-card-title:18px; /* card / list titles */ --t-lede:18px; /* hero subtitles + article decks — reduced a touch (Commander 2026-08-19); Poppins reads a hair larger than Inter, so 18px sits right under the headline */ --t-body-lg:17px; /* long-form article body */ --t-body-md:15.5px; /* standard column text */ --t-body-sm:14.5px; /* card body */ --t-meta:13px; /* bylines, timestamps */ /* eyebrows/kickers use --t-micro (12px, 700, uppercase, tracked) */ --measure:760px; /* long-form reading measure (~68ch at 17px); also the lede/subtitle measure */ --sp-hero-gap:24px; /* hero headline -> subtitle gap, every page */ --sp-section-gap:28px;/* landing SECTION heading -> subtitle gap. One value so the cost / pricing / workspace / diff sections can't drift (they were 26 / 20 / 28 / 18 — visibly inconsistent). */ /* =================================================================== SYSTEM SCALES (Foundations pass, Commander 2026-08-19 — UI/UX review SG-3/SG-4). Before this, only color + type were tokenized; spacing, radius, shadow, motion, elevation, and the on-green text color were ad-hoc literals scattered across the CSS (19 radii, 8+ easings...). These are the single source; migrate literals to them. The product is dark-only, so elevation values are dark-appropriate (SG-1 direction). =================================================================== */ /* Spacing — 4px base, 8px rhythm. Snap paddings/gaps/section rhythm here. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-14:56px; --sp-16:64px; --sp-20:80px; --sp-24:96px; --sp-30:120px; --sp-36:144px; --sp-44:176px; /* Radius — one ladder. --r-pill is the only fully-round value. */ --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-2xl:28px; --r-3xl:34px; --r-4xl:40px; --r-pill:999px; /* Canonical dark-on-green text (was #15140F / #0D0D0D / #161510 in 3 places). MUST be a literal — a self-referential var(--on-green) resolves to nothing, so any `color:var(--on-green)` on a green fill falls back to white (the bug that whitened the Check Rebates button + the "Real answers" highlight). */ --on-green:#15140F; /* Motion — shared easings + durations (replace the 8+ one-off curves). Literal cubic-beziers — same self-reference hazard as --on-green above. */ --ease-standard:cubic-bezier(.2,.7,.2,1); /* general entrance/hover */ --ease-emphasized:cubic-bezier(.22,1,.36,1);/* expressive settle (reveal, count-up) */ --ease-out:cubic-bezier(.4,0,.2,1); /* exits / collapses */ --dur-fast:.15s; --dur-base:.25s; --dur-slow:.45s; /* Elevation — depth from LIGHT (top-lit gradient + bright top-rim + faint halo), because black drop-shadows are invisible on #000 (CLAUDE.md §6). This is the "borrow Moonshot" recipe, tokenized so every card shares one material. --elev-2 is a hair brighter for the hero / paid surfaces. */ --elev-fill: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.012) 16%, rgba(255,255,255,0) 34%), radial-gradient(140% 120% at 50% -25%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.022) 32%, rgba(255,255,255,0) 66%), #0c0c0c; --elev-border:rgba(255,255,255,0.10); --elev-1: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.015), 0 40px 90px -40px rgba(0,0,0,0.8), 0 0 70px -24px rgba(255,255,255,0.045); --elev-2: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 0 0 1px rgba(255,255,255,0.02), 0 50px 110px -44px rgba(0,0,0,0.85), 0 0 90px -26px rgba(255,255,255,0.06); --elev-recessed: /* a real recessed panel on #000: slightly DARKER fill + a top inner-shadow that reads because the card around it is lighter (fixes the invisible inset-on-black, UX-02). */ inset 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03); } /* SG-1: the old light palette, demoted to a dormant opt-in theme (nothing sets data-theme="light" today). Kept so light is recoverable and so the base/override relationship is now correct (dark = base, light = the exception). */ [data-theme="light"] { --bg:#F2EFE8; --bg-2:#EAE6DC; --line:rgba(0,0,0,0.10); --line-2:rgba(0,0,0,0.16); --surface:rgba(0,0,0,0.03); --surface-2:rgba(0,0,0,0.05); --border:rgba(0,0,0,0.10); --border-2:rgba(0,0,0,0.16); --text:#161510; --text-2:rgba(22,21,16,0.72); --muted:rgba(22,21,16,0.66); --dimmed:rgba(22,21,16,0.60); --faint:rgba(22,21,16,0.18); } /* [data-theme="dark"] now RE-ASSERTS the base (same values as :root) plus the dark-only extras (type-display sizes, weights). Redundant for the base color tokens but kept so the live data-theme="dark" path is provably unchanged. */ [data-theme="dark"] { --green:#A8FF35; --green-grad:#8FE020; --green-dim:rgba(168,255,53,0.10); --bg:#000000; /* Commander 2026-07-17: true black (was #0D0D0D near-black) */ --surface:rgba(255,255,255,0.035); --surface-2:rgba(255,255,255,0.06); --border:rgba(255,255,255,0.09); --text:#FFFFFF; --text-2:rgba(255,255,255,0.75); --muted:rgba(255,255,255,0.55); /* --dimmed carries real text (micro-labels, timestamps, the ZIP placeholder), so it must clear WCAG AA (4.5:1) on the dark --bg. At 0.35 it measured 3.19:1 (fail); raised to 0.46 (4.68:1). Stays below --muted (0.55, 6.25:1) so the tier order under --text-2 (0.75) holds. Completes #358's AA pass, which raised the light base but left this dark override. */ --dimmed:rgba(255,255,255,0.46); --faint:rgba(255,255,255,0.20); --warn:#FFB454; --surface-3:rgba(255,255,255,0.09); --border-2:rgba(255,255,255,0.16); /* type/weight tokens (--t-display/--t-title/--t-body/--t-micro/--w-reg/--w-bold) moved to :root (UX-19 de-leak) — they are not theme-dependent. --maxw kept here only as a harmless identical re-assert alongside the color re-asserts. */ --maxw:1600px; }