/* ============================================================ MyFuelSavings Design System — tokens.css (v2) Import this before any app-specific CSS. v2 — "MyFuelSavings" brand pass. Palette moved to the dark system (canvas #0A1420, card #0F1E30) and the BRAND/CTA ROLE MOVED FROM ORANGE TO LIME: - lime (--green) is now the PRIMARY brand + CTA color - orange (--orange) is now ALERTS / attention accent ONLY Every existing variable NAME is preserved (no page breaks); only values, the two brand-colored primitives (.btn-primary, badges), and the font stack changed. Fonts: Anton stays for big numbers + the wordmark (heavy/robust); body moved Inter -> Public Sans; added Archivo (headings, since REMOVED — unused) + IBM Plex Mono (tabular). Nav/labels stay Oswald. ============================================================ */ /* THE FONTS ARE NOT LOADED HERE — each page carries them in its own , between the `fonts:start` / `fonts:end` markers. Moved out 2026-08-21 (#98); SELF-HOSTED from 2026-08-23 (#99), so the @font-face rules now live in `web/fonts.css` and the files in `web/fonts/`. Google is no longer involved, and the CSP no longer permits it. This file used to open with an `@import url('https://fonts.googleapis.com/...')`. A nested @import is the slowest way to load a font: the browser cannot see the URL until tokens.css has been fetched AND parsed, so the font stylesheet became a THIRD serialized hop — HTML, then tokens.css, then Google — and all three are render-blocking. It also meant no preconnect could be issued in time to matter, so the font CSS and the font files each paid a cold DNS+TCP+TLS to a different third-party origin. Anything that adds a font must add it to the in every page that renders it, NOT here. Putting it back in this file re-creates the hop for every page at once, and the symptom (a slow first paint) names neither this file nor fonts. The families and their roles are still defined below — only the LOADING moved. Self-hosting them, which removes both Google origins from first paint entirely, is issue #99. */ /* v3 — "Slate Lift" base (2026-09-05). Same hue family, one step out of the dark: canvas #0A1420 -> #111F33, card #0F1E30/#13243A -> #182C47/#1F3757, edges and the blue data accent lifted with it. The muted inks (--dim, --dim-2, --control-border, --purple, --red-text) had to rise too, because a lighter card pulls a fixed grey under 4.5:1; every value here was picked against the card's LIGHT end and holds AA there. The brand inks (lime, gold, orange, red) did not move. Study and per-pair readings: the Blue Range Study artifact. */ :root { /* ---- Base ---- */ --navy-bg: #111F33; /* page background (canvas) */ /* The canvas as an rgb TRIPLE, for the "well" fills that show the canvas through a card at some alpha: `rgba(var(--navy-rgb),.6)`. Those beds used to be a literal rgba(6,18,31,…) in five pages, which stayed pinned to the OLD canvas when the base moved (2026-09-05). */ --panel: #182C47; /* card background, dark end of gradient */ --panel-2: #1F3757; /* card background, light end of gradient */ --panel-border: #2F4A6B; /* The edge of a FIELD or an outlined control, as opposed to the edge of a card. A card edge is decoration and may be faint; a text field's border is the only thing that says "type here", and at --panel-border it was 1.2–1.5:1 against its own fill — an empty field the eye cannot find until it is focused. 4.4:1 against the navy fill, 3.7:1 against the lightest card. Use on input, select, textarea and outlined buttons; keep --panel-border for cards and table rules (#190). */ --control-border: #7A8799; /* card borders, dividers */ /* ---- Accents (each has a ROLE, not just a look) ---- */ --green: #A6E22E; /* PRIMARY brand + CTA; savings, positive, success */ --green-bright: #BCF24E; /* hover/emphasis state of green */ --green-deep: #7BAE22; /* darker lime, for on-light or pressed states */ --blue: #6DB7FF; /* data accent: volume/gallons, neutral info */ --gold: #E6B33E; /* data accent: pricing, rates, chart variety */ --orange: #FF8A42; /* ALERTS / attention accent (NO LONGER brand/CTA) */ --orange-hover: #FF9D5E; --purple: #AA94D7; /* RARE: premium/entitlement tier only (was #8E72C6; raised 2026-08-27 so it passes AA as text on a card, #189; raised again 2026-09-05 for the lighter card) */ --red: #EA5A3E; /* negative deltas, errors, destructive actions — fills, borders, large figures */ /* Red AS TEXT on a card. --red is 3.9–4.2:1 on a card, which fails AA for normal-size text, and the same lighter tint that fixes it reads as a highlight when used as a fill. So the role keeps one hue and two values: --red for fills, borders and big Anton figures (≥3:1 is enough there), --red-text (4.5:1 worst case) for the error line, the failed chip, the warning paragraph. A red-filled button takes a NAVY label, the same dark-on-accent pattern the lime CTA uses — white on --red is 3.5:1. (Accessibility audit 2026-08-27, #189.) */ --red-text: #F27C66; /* ---- Environment (NOT a data role) ---- */ /* Magenta is the one hue in this file that no chart, tile, delta or status can use, and that is the whole reason it was chosen. The DEV badge has to be unmistakable at a glance WITHOUT borrowing a meaning: gold already says "rates", orange is alerts-only, purple is entitlement tiers, and a badge in any of them would read as data about the page rather than a fact about the deployment. Reserved for environment marking — never plot it. */ --env-badge: #FF2D95; --env-badge-text: #14060D; /* near-black on magenta — 5.3:1, passes AA */ /* ---- Text ---- */ --text: #EDF1F6; /* primary text */ --text-soft: #C7D0DC; /* secondary text, slightly dimmed */ --dim: #A8B0BC; /* muted text, labels */ --dim-2: #96A0AE; /* most-muted text, fine print — 4.55:1 on a card's light end, the floor for text (was #5E6B7D, 3.4:1; #189) */ /* ---- Type ---- */ --font-display: 'Anton', sans-serif; /* big numbers / hero figures + wordmark (heavy) */ /* --font-heading (Archivo) was REMOVED 2026-08-23. It was declared here and loaded on every page, and referenced by nothing — zero `var(--font-heading)` uses anywhere in the app, found by the 2026-08-21 performance audit (#97/#99). Self-hosting made the waste concrete: it would have been a font file shipped for no reader. If a section heading ever needs a face of its own, add the token back AND self-host the family AND add its notice to web/OFL.txt — all three, since we now redistribute what we serve. */ --font-label: 'Oswald', sans-serif; /* headers, nav, labels, buttons */ --font-body: 'Public Sans', sans-serif; /* body copy, table cells, form fields */ --font-mono: 'IBM Plex Mono', monospace; /* tabular numbers, monospaced data */ /* ---- Layout ---- */ --radius: 12px; --radius-sm: 8px; --gap: 16px; --shadow-card: 0 8px 24px rgba(0,0,0,.35); --transition: 160ms ease; } /* ---- Shared primitives usable by any app ---- */ .card { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 20px 24px; } /* PRIMARY CTA — brand color is now lime (was orange). */ .btn-primary { font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; background: var(--green); color: var(--navy-bg); border: none; border-radius: var(--radius-sm); padding: 10px 22px; cursor: pointer; transition: background var(--transition); } .btn-primary:hover { background: var(--green-bright); } /* SECONDARY — lime outline that fills on hover. */ .btn-secondary { font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; background: transparent; color: var(--green); border: 1px solid var(--green); border-radius: var(--radius-sm); padding: 10px 22px; cursor: pointer; transition: background var(--transition), color var(--transition); } .btn-secondary:hover { background: var(--green); color: var(--navy-bg); } /* VISUALLY HIDDEN, still in the accessibility tree and the tab order. For a control whose visible affordance is drawn by something else — the upload page's file input sits under its drop zone (#129). `display:none` and `visibility:hidden` both remove an element from the tab order, which is the failure this exists to prevent. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .badge { font-family: var(--font-label); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .badge-success { background: rgba(166,226,46,.15); color: var(--green); } .badge-pending { background: rgba(230,179,62,.15); color: var(--gold); } .badge-info { background: rgba(109,183,255,.10); color: var(--blue); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ============================================================ `hidden` WINS (2026-09-05) The HTML `hidden` attribute is only a user-agent `display:none`, so ANY author rule that sets display on the same element beats it: `.addStop{display:flex}` kept the "enter a fuel stop by hand" card on the upload page with the feature off (Scott), `.f{display:flex}` showed the vehicle and odometer rows that exist for features that do not, `.legKinds{display:inline-flex}` and `.statgrid{display:grid}` did the same on the map and affiliate pages. Four pages had patched it one selector at a time (`.gate-hint[hidden]`, `.chrome-menu-who[hidden]`, ...), and maintenance.html carries this exact rule privately. `!important` because that is the whole point: `el.hidden = true` in JS must mean gone, whatever the element's class says about its layout. Toggle visibility with `hidden`, never by writing `style.display`. `test/web/hidden-wins.test.ts` holds this rule here and requires every page that uses the attribute to load this file. ============================================================ */ [hidden]{ display:none !important; }