/* ── Theming ─────────────────────────────────────────────────────────────── Two themes off one set of declarations. The mechanism is a CHANNEL variable, not a value swap: page CSS says `rgba(var(--sf-rgb), 0.07)` instead of `rgba(255,255,255,0.07)`, so the alpha — which is where all the per-page design judgement lives — stays exactly where its author put it, and only the ink colour flips. Dark output is byte-identical to what it was before the theme existed; that is the point, and it is what makes the diff reviewable. The same trick was already in this codebase before this change: Jobs.css declares `--wev-edge: 196,181,253` and consumes it as `rgba(var(--wev-edge), .2)`. What CANNOT ride the channel is text. Dark allows informational ink down to alpha .45; light needs .63 for the same 4.5:1, so a channel flip would push a large share of this app's muted text under AA. Ink is therefore mapped to the four named steps below and each theme sets its own alphas. Measured against #f1ebfc — a panel at its minimum opacity over the strongest orb, which is the worst surface this app can composite. See docs/superpowers/specs/2026-08-04-light-theme-design.md. */ :root { color-scheme: dark; /* Channels. Everything a page paints a SURFACE, BORDER or SHADOW with. */ --sf-rgb: 255, 255, 255; --sh-rgb: 0, 0, 0; /* The ground the glass floats on. */ /* ── The WP-4 surface vocabulary, dark side ─────────────────────────────────────────────── These eight names are authored FOR light — canvas/surface/keyline/accent is the language of an occlusion-based theme, and dark builds depth by tint over near-black instead. They are declared here because a colour token is a PAIR: a token declared in one theme only silently keeps the other theme's value forever, with a green build and no error, and token-parity.mjs exists to make that impossible. Each value is transcribed from the token dark already uses for that job, so adopting one of these names at a site is a no-op in dark rather than a redesign of it. */ --canvas: #050309; /* = --ground */ --surface: rgba(255, 255, 255, 0.07); /* = --glass-bg, the tint-over-black surface */ --surface-inset: rgba(255, 255, 255, 0.05); /* = --recess-a05, a step below the card */ /* The stat tile's fill. Its own token rather than --surface-inset because the two are different roles: --surface-inset is a RECESS (a well, a track, something carved into the card), while a tile is the one filled CONTAINER the light theme still ships. In dark that container is the ordinary glass surface; only light gives it a distinct step. Declared here so the light value is a token and not a literal — nothing in dark consumes it, so this cannot move dark. */ --tile-fill: rgba(255, 255, 255, 0.07); /* = --glass-bg, dark's card surface */ --keyline: rgba(255, 255, 255, 0.14); /* = --glass-border */ --keyline-strong: rgba(255, 255, 255, 0.18);/* = --border-strong */ --accent: #7c3aed; /* = --accent-solid */ /* The accent as a CHANNEL, so a tint of it can be composed with rgba() instead of hand-typed. Without this a wash of the accent has to be spelled as a literal, which goes stale the moment the accent is re-derived — and that has already happened once during this rebuild. */ --accent-rgb: 124, 58, 237; --accent-hover: #6d28d9; /* = --ref-accent-deep */ --accent-subtle: #a78bfa; /* = --accent-soft */ --ground: #050309; --ground-deep: #020103; --astra-bg: #030303; --astra-accent: #7c3aed; --astra-accent-soft: #a78bfa; --astra-text: #ffffff; --astra-muted: #94a3b8; /* Width of viewport to keep clear at the TOP-RIGHT: the fixed notification bell (40px at right:64) + the nav hamburger (40px at right:14) both live there, above every page, so any header control that runs to the right edge gets buried under them. Pages reserve this. */ --topright-safe: 112px; } /* Phone has no fixed bell and no hamburger — MainLayout does not mount either component below 768px — so the 112px strip 18 stylesheets reserve against them is 112px of a 390px screen, 29%, reserved for nothing. Tablet's own answer is the rule below, once the rail replaces the drawer. */ :root[data-shell='phone'] { --topright-safe: 0px; } /* Tablet has no fixed bell and no hamburger either: the nav rail on the left replaces both, and the Notiser row inside it opens the same panel. Landing here in the same task that removes those two controls is binding, not tidy — the 112px strip 18 stylesheets reserve is protection against controls that still render, so zeroing it first is an overlap regression, not a saving. */ :root[data-shell='tablet'] { --topright-safe: 0px; } :root { --glass-bg: rgba(255, 255, 255, 0.07); --glass-border: rgba(255, 255, 255, 0.14); --glass-blur: blur(24px) saturate(160%); --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.04); --glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 24px rgba(124, 58, 237, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.06); /* ── Status palette ──────────────────────────────────────────────────── Three meanings, three hues, and each hue means ONE thing app-wide. The brand violet above is identity and primary action; it is never a status. Validated with the dataviz validator against this app's real composited surfaces (a glass panel over #050309 flattens to ~#0d0b12): normal-vision separation worst pair ΔE 21.2 PASS (floor 15) CVD separation worst adjacent 10.6 PASS (target 8) contrast vs surface all ≥ 3:1 PASS One constraint rides along and is binding on every use site: BREACH against LOGGED measures ΔE 6.5 for deuteranopia — inside the 6–8 floor band. Wherever those two can appear in the same control, colour alone is not allowed to carry the difference; a label, a gap or the geometry must separate them too. See the `contrast-audit` skill. */ --st-logged: #34d399; /* work actually recorded / done */ --st-logged-soft: rgba(52, 211, 153, 0.12); --st-logged-line: rgba(52, 211, 153, 0.38); --st-expected: #fbbf24; /* owed but not here yet: booked, unarrived, behind */ --st-expected-soft: rgba(251, 191, 36, 0.1); --st-expected-line: rgba(251, 191, 36, 0.35); --st-breach: #f87171; /* over capacity, past the ready date */ --st-breach-soft: rgba(248, 113, 113, 0.12); --st-breach-line: rgba(248, 113, 113, 0.38); /* Unread-count red. NOT part of the status palette above — it does not mean "breach" or any other app-wide status, it marks a count of unread things (the bell badge, the tab counts, More's badge). Kept as its own token so the one colour has one home instead of being hand-copied at every badge site. */ /* Carries white text at 10px bold, so the badge's own contrast is what decides whether the count can be read: #ef4444 put --ink at 3.33:1 (sampler, /vehicle-storage). #c81e1e reads 5.08:1 with the ink and still holds 3.58:1 against the ground it sits on, so the badge is both legible and visible as a mark. */ --unread-count: #c81e1e; /* Ink. Anything at or below --ink-faint is decorative: it may not be the only place a piece of information appears. */ --ink: #f1f1f1; --ink-dim: rgba(255, 255, 255, 0.72); --ink-muted: rgba(255, 255, 255, 0.5); --ink-faint: rgba(255, 255, 255, 0.38); --hair: rgba(255, 255, 255, 0.07); /* ── Type scale ──────────────────────────────────────────────────────── Seven steps, and nothing between them. Before this the page stylesheets carried 40+ distinct font sizes whose six most-used values were 0.68–0.9rem — every page was set at 10–14px end to end, so no page had a headline size and nothing on any screen could be primary. Hierarchy was then faked with another bordered box, which is why cards nest three deep. --t-xs is the floor for anything a mechanic reads. --t-micro is for uppercase eyebrows and units only; a sentence never gets it. */ --t-display: 2rem; /* 32px — the one hero figure on a page */ --t-h1: 1.375rem; /* 22px — page / card title */ --t-h2: 1.0625rem; /* 17px — section title */ --t-body: 0.9375rem; /* 15px — body, a row's primary fact */ --t-sm: 0.8125rem; /* 13px — secondary fact, meta */ --t-xs: 0.75rem; /* 12px — labels, badges */ --t-micro: 0.6875rem; /* 11px — eyebrow / unit, uppercase, never prose */ /* ── Space ───────────────────────────────────────────────────────────── 4px base. The app's two most common paddings were 3px and 2px, which is how rows ended up dense without being readable: density has to come from carrying fewer facts per row, never from closing the gaps around them. A row's vertical padding starts at --sp-3. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* ── Radius ──────────────────────────────────────────────────────────── Four values, chosen by what the thing IS. Fifteen were in use (3,4,6,7,8,9,10,11,12,14,16,18,20,50,999), so no two surfaces agreed. */ --r-control: 8px; /* inputs, chips, small buttons */ /* `--r-sm` was CONSUMED at two sites and DECLARED NOWHERE — InvoiceDraftDetailDesktop.css:1005 and InvoiceDraftDetailPhone.css:109, both on the PDF button. An undeclared custom property makes the whole declaration invalid at computed-value time, so `border-radius` fell back to 0 in BOTH themes and has done since the day it was written. Nothing errored; the corner was simply square and nobody looked. Declared as an alias rather than a new number: the two sites want "the small control radius", which is exactly what `--r-control` already means, and aliasing keeps them on the ladder in each theme (8px dark, 4px light) instead of pinning a third value that would then have to be maintained. Only the invoice-draft routes consume it, and those are outside the dark baseline, so this is safe to fix at source. */ --r-sm: var(--r-control); --r-card: 12px; /* a record: quote card, event, row surface */ --r-panel: 16px; /* a page-level container */ --r-pill: 999px; /* badges, status pills */ /* ── Measure ─────────────────────────────────────────────────────────── One centred column for a page's whole composition — the gutter rail AND the content, not each centred against the viewport separately. Two independent centrings is what left a third of a 1900px monitor empty with the content adrift to the left. */ --measure: 1240px; /* ── The ledger measure — ONE value, BOTH themes ─────────────────────── `--lx-page` is the width of a list-plus-pane ledger composition (the column, the reading pane and the gap). It is read by `listLedgerStyle.ts` and by every page built on that pattern. It was declared SIX times, per page, at six different values, and the ledger is one component: Customers.css:20 68.5rem = 1096px Vehicles.css:20 71.5rem = 1144px QuoteDraftsDesktop.css:12 var(--measure) = 1240px QuoteDraftsDesktop.css:1009 82rem = 1312px PhoneBookingsDesktop.css:19 1560px WorkQueueDesktop.css:63 1560px Worse, the two themes then disagreed on top of that, because light drops the page cap and dark keeps it. Measured at a 1900px viewport, the SAME `.lx-split` on the SAME markup: Telefon light 1820 dark 1528 Work Queue light 1528 dark 1528 Incoming quotes light 1312 dark 1312 So Telefon in light — the page that was signed off and the one the shop owner points at — is 292px wider than Work Queue and 508px wider than the incoming-quote ledger, and 292px wider than its own dark twin. 1820px is that signed-off Telefon composition, and it is now the default for every ledger in both themes. A page may still override it, but it has to have a reason and say so — six silent overrides is what produced a component that renders at six widths. It is a LENGTH, not a colour, so it is theme-invariant by construction and `compare.mjs` (which records paint only) will not see it move. That is the correct outcome: the two themes are meant to differ in surface, never in where the content sits. */ --lx-page: 1820px; /* ── The page measure — ONE value, BOTH themes ───────────────────────── The centred column a non-ledger page composes on. It already existed, but only inside `public/theme-light/_base.css`, which is a THEME file — and a length in a theme file cannot be agreed on by construction. That one misplacement is why six pages measured 1560 in light and 1096–1240 in dark. Measured at 1900, light vs dark, before this moved: /customers 170 / 1560 vs 402 / 1096 (464px apart) /vehicles 170 / 1560 vs 378 / 1144 /settings 170 / 1560 vs 360 / 1180 /complaints 170 / 1560 vs 330 / 1240 /dropoffs, /vehicle-storage — the same 320px split Deliberately NOT `--measure` above. That token is ALSO the width of a wide modal (`modalShellStyle.ts:87`, `.ibx-sheet`, `.rtx-add`, `.vsx-sheet`, `.dsx-sheet`), and a 1560px dialog on a 1900px monitor is a full-bleed sheet, not a dialog. A page measure and a dialog measure are two decisions that happened to share one name. This one names only the page. 1560 rather than uncapped: `registers.css` argued from evidence that an uncapped ledger row puts the identity cell and its figure a screen apart. It is also the number light already shipped, and light's positioning is the one that was signed off. */ --page-measure: 1560px; /* ── The dashboard measure — ONE value, BOTH themes ──────────────────── A page of FIGURES over a period: KPI tiles, a chart band, a summary table. Not a board (a board's rows are records you scan and act on, and they earn --page-measure), and not a document. `/finance` argued this number from evidence and is the signed-off page: "1360, down from 1520: at the old width a table holding one mechanic put the label KUND at the far left and its value 1400px away at the far right" (FinanceDesktop.css:41-45). `/analytics` makes the SAME argument in its own words — "a statistics page that runs the full width of a 27-inch monitor makes the eye travel the length of a desk between a label and its figure" (Analytics.css:18-19) — and then picked 1240, which is `--measure`, the DIALOG width. Two pages of the same kind, one argument, 120px apart and neither number named. So it gets a name. 1360 rather than 1240 because 1360 is the one of the two that was reasoned to and shipped; /analytics moves to it. */ --dash-measure: 1360px; /* ── Form fields ─────────────────────────────────────────────────────── A field is a box you are invited to type into, and it has to say so in both themes. Page stylesheets all reached for `rgba(var(--sf-rgb), 0.05)`, which works in dark (5% white on near-black is a visible inset) and fails in light: --sf-rgb flips to the ink colour, so the same rule renders 5% dark ink on a near-white panel — no edge, no fill, no field. So the two themes are not one alpha applied to a flipping colour. Dark reads by its FILL (a lit inset in a dark panel); light reads by its BORDER (a white field on a white-ish panel is defined by its outline, the way every light-theme form in the world is). --field-ring is the focus ring, which the old form did not have at all: it signalled focus by shifting a border alpha, invisible in light and easy to lose halfway down a fourteen-field keyboard pass. */ /* The dialog surface. Its own token rather than the legacy .modal-panel gradient, because that gradient's light values (#d4ddee → #d6dff1) are a mid blue-grey, and every light-theme status colour in this file was measured against near-white glass. Composited and measured, the amber --st-expected landed at 2.6:1 on it and the red at 4.1:1 — both under AA, on a surface that carries a price. Near-white in light puts them back where they were validated. */ --sheet-bg: linear-gradient(160deg, #171a24, #10131b); --field-bg: rgba(255, 255, 255, 0.05); --field-bg-hover: rgba(255, 255, 255, 0.08); --field-border: rgba(255, 255, 255, 0.12); --field-border-hover: rgba(255, 255, 255, 0.2); --field-border-focus: rgba(167, 139, 250, 0.75); /* The ring is a NON-TEXT indicator and WCAG 2.2 SC 1.4.11 asks it for 3:1 against what it covers. At rgba(124,58,237,0.3) it composited to 1.7:1 on a field and the sampler measured the real thing at 2.91:1 on /vehicle-storage's search box — a focus state a keyboard user can lose. The lit indigo at 0.7 measures 3.8:1 over both the field fill and the bar behind it, and reads as the same violet the border already shifts to. */ --field-ring: rgba(167, 139, 250, 0.7); /* ── Difficulty ──────────────────────────────────────────────────────── A job's skill tier is NOT a status: an Expert job is not a breach and an Enkel one is not work already recorded. It used --st-logged/expected/breach verbatim, which spent all three status hues on a non-status and left green and amber meaning two different things on the same card. Its own ramp instead — and never the only carrier: every use site prints the tier's name beside the colour. Measured with the dataviz validator against the real composited chip (panel #0d0b12 under the tier's own 16% tint ≈ #1b1424): normal-vision separation worst all-pairs ΔE 17.2 PASS (floor 15) CVD separation worst 10.9 protan / 8.3 tritan PASS (target 8) WCAG text (13px/600) 7.2 · 5.0 · 10.5 : 1 PASS (floor 4.5) The first two candidates failed here and are recorded so they don't come back: a pale-violet ramp (#cbd5e1/#c4b5fd/#f5d0fe) measured ΔE 10.4 normal between tiers 2 and 3 — invisible as a distinction — and #8b5cf6 for tier 2 cleared every ΔE check but landed at 4.2:1 on its own tint, under AA. */ --diff-1: #94a3b8; /* Enkel — neutral slate, deliberately unremarkable */ --diff-1-soft: rgba(148, 163, 184, 0.12); --diff-1-line: rgba(148, 163, 184, 0.3); --diff-2: #9270f7; /* Avancerad — violet, one step deeper than the brand ink */ --diff-2-soft: rgba(124, 58, 237, 0.16); --diff-2-line: rgba(167, 139, 250, 0.36); --diff-3: #f0abfc; /* Expert — lightest, pushed toward magenta */ --diff-3-soft: rgba(217, 70, 239, 0.18); --diff-3-line: rgba(240, 171, 252, 0.42); /* ── The finance surface's ink, as CHANNELS ──────────────────────────── Ekonomi, Fakturor, the invoice editor, Analys and Kalender share one ink ramp, declared in lib/financeTokens.ts. That file is INJECTED through usePageStyle, which scopes a sheet by nesting it — so an `html[data-theme="light"]` selector inside it becomes a descendant of the page scope and can never match (pageStyle.ts lists this among its known limits, and it had no live instance until the light pass tried to add one). So the theme difference lives here, where `html[data-theme]` works natively, and financeTokens consumes these. Same trick as --sf-rgb above: the channel flips, the alphas flip with it, and the page CSS stays theme-agnostic. Dark is unchanged — these are the values that were already in financeTokens. Light mirrors this file's own ink ladder (#241b3d), because the codemod maps the dark ink to #5400b6 and a violet neutral is not a neutral. Measured against #f1ebfc, the worst light surface this app composites: 13.9 / 8.2 / 6.0 / 4.5 : 1 — every step clears AA, step 4 included, and step 4 carries column heads on that surface. */ --fin-ink-rgb: 245, 243, 249; --fin-a2: 0.72; --fin-a3: 0.58; --fin-a4: 0.49; /* Amber, and the one step that had to be re-measured rather than mapped: the codemod's #9a6000 lands at 4.45:1 in light, under AA — and it is the colour of the reason text on every blocked row of the invoice queue. */ --fin-warn-c: var(--c-orange-f5c451); /* A recess — darker than the sheet it sits in, never lighter. */ --fin-well-c: rgba(var(--sh-rgb), 0.22); /* ── Motion ──────────────────────────────────────────────────────────── Three durations, two curves. Before this the app used 31 distinct durations, each picked in isolation. Neither curve overshoots: a tool opened forty times a shift should not bounce. See the `motion-scale` skill. */ --mo-quick: 120ms; /* state under the cursor: hover, focus, colour swaps */ --mo-base: 220ms; /* things that move or resize: meters, expand/collapse */ --mo-enter: 320ms; /* things that arrive: modals, toasts */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); } /* ── Light ───────────────────────────────────────────────────────────────── Lifted violet: the same living violet ground, inverted, with white glass on it. Not a lightness map of the dark theme — several dark values were chosen for how they composite over near-black and those measurements do not survive the change of ground. `html[data-theme]` (specificity 0,1,1) deliberately outranks `:root` (0,1,0), so an explicit choice always beats the media query below it. */ html[data-theme="light"] { color-scheme: light; /* ═══════════════════════════════════════════════════════════════════════════════════════════ STRIPE-LIGHT — geometry and type are THEME-VARIANT from here. ─────────────────────────────────────────────────────────────────────────────────────────── This amends page-standard.md §8.1, which declared geometry theme-invariant. That rule assumed geometry carries no theme meaning. It does: corner radius is one of the strongest signals separating a consumer product from an instrument, and 16px panels are much of why the light theme read as soft. Same for type — a 32px display figure on a dense light dashboard reads as a marketing page, not as a financial terminal. The leverage is why this is four lines rather than a sweep: 501 radius declarations and 1 186 font-size declarations already read these tokens, so they all move at once. The literals that do not are a second pass. Dark keeps its own values; every declaration here lives inside the light block and cannot match in dark. See docs/design/stripe-light-decisions.md. */ /* MEASURED: no radius token above 4px exists anywhere in Stripe's shipped Dashboard CSS. Not 8, not 12, not 16. Softness comes from the SHADOW, never from the corner — which is the opposite of the reflex, and it is why a Stripe card reads as precise rather than soft-edged. */ --r-control: 4px; /* Restated in the light block purely so `token-parity.mjs` can see it in both — the alias would resolve correctly from the base declaration alone, but a token that appears in one block only is exactly the silent failure that check exists to catch, and it cannot tell an intentional alias from an omission. Same value, same meaning, one line of noise for a working guard. */ --r-sm: var(--r-control); --r-card: 4px; /* see --r-control: 4 is the ceiling, not a step on a ladder */ --r-panel: 4px; /* even modals. Measured, not inferred. */ --r-pill: 999px; /* true pills only; badges take 4px in the badge layer */ /* Flat and weight-driven. Hierarchy comes from weight and colour, not from size jumps — which is what lets a dense table stay dense without any row shouting. The 11px floor is unchanged and non-negotiable: the bay tablet is read at arm's length under glare. */ --t-display: 1.25rem; /* 20px — the one hero figure */ --t-h1: 1.25rem; /* 20px — page title */ --t-h2: 0.875rem; /* 14px — card / section title */ --t-body: 0.8125rem; /* 13px — body, row primary */ --t-sm: 0.8125rem; /* 13px — secondary fact */ --t-xs: 0.75rem; /* 12px — labels, badges */ --t-micro: 0.6875rem; /* 11px — uppercase eyebrow, tracked */ --sf-rgb: 27, 35, 61; --sh-rgb: 29, 57, 149; /* Candidate C's ground, 2026-08-09. Deeper than the shipped #f3f0fb on purpose: the light theme's panels are OPAQUE white, so the ground is the only thing they can be lighter than. Chroma is held at 0.008 — the shipped theme's failure is chroma at high lightness, where the same absolute tint that reads as "dark grey" at L=10% reads as unmistakable lavender at L=95%. */ /* ═══════════════════════════════════════════════════════════════════════════════════════════ WP-4 — the pivot. Light stops being a translation of dark and becomes a design for light. ─────────────────────────────────────────────────────────────────────────────────────────── Three attempts failed by tuning values inside a set of mechanisms that belong to darkness: glass, blur, glow, drifting orbs, coloured status text, hierarchy carried by size. Each one needs a dark ground to mean anything. Glass over white samples white. Glow on white is a smudge. No amount of value-tuning fixes a mechanism that does not belong. What replaces them is occlusion and layering: an off-white canvas, pure-white surfaces, a structural 1px keyline, and shadows so slight they read as contact rather than as lift. Depth comes from edges, not from atmosphere. Every declaration in this block lives inside html[data-theme="light"] and cannot match in dark. See docs/design/stripe-light-token-spec.md for the measured values. */ /* The canvas is never pure white — white is reserved for surfaces, so that a card can be lighter than the thing it sits on. That single relationship is what carries elevation here. */ /* #E3E8EE — Stripe gray-100, measured off the shipped Dashboard CSS. Far darker and cooler than the #eef2f7 this held, and the delta to a white card is deliberately UNEVEN (+28 R, +23 G, +17 B): the canvas is a cool blue-grey and the card is neutral white, so they separate on hue as well as lightness. A neutral grey page under a white card separates on lightness alone, which is exactly what reads as a sticker glued on. */ --canvas: #e3e8ee; --surface: #ffffff; --surface-inset: #f3f6f8; /* steps BELOW the card: wells, tracks, recesses */ /* MEASURED gray-50. Stripe removed its cards on purpose — their own published before/after says cards "take up too much space" and "can't be placed side-by-side" — and the ONE container that survived the cull is a soft grey fill with no border, used for stat tiles. This is that fill. It is a step ABOVE --surface-inset, not the same value: a recess is carved into a surface, a tile sits on the page as the only filled object left. Two roles, two values. */ --tile-fill: #f7fafc; --ground: #f6f8fa; --ground-deep: #eef2f6; --astra-bg: #f4f5f7; --astra-accent: #2f4fd0; /* Follows the re-derived accent. This one declaration feeds ~20 accent-text sites across the boards (link hovers, active day chips, state labels); left at the retired #7c3aed it was the largest remaining source of the old, louder violet in light. Dark is untouched — that value lives on line 33. */ --astra-accent-soft: #2f4fd0; --astra-text: #1b233d; --astra-muted: #545b70; /* Ink. Alphas are NOT the dark ones, and the whole ladder is compressed upward rather than mapped step-for-step. Dark reaches 4.5:1 at alpha .45, so its bottom step is still legible body text. Light does not reach 4.5:1 until .63 — put the dark ladder's .38 through here unchanged and the app's small flag labels ("Behöver lyft", "Expert", the nav section headings) land at 3.0:1, which is the LARGE-text floor being used for 11px text. So every step sits at or above .63 and the hierarchy is carried by the gaps between them instead. Four steps, all of them legible: 1.00 -> 14.5:1 .82 -> ~8:1 .72 -> 6.1:1 .63 -> 4.5:1 There is deliberately no decorative step below the body floor in light. */ /* ── Re-based 2026-08-09 (Phase 5) ──────────────────────────────────────────────────────── Two things were wrong, and the second is the one that made light pages read flat. 1. The BASE was `36, 27, 61`, and the ladder was validated against `#f1ebfc` — "a panel at its minimum opacity over the strongest orb". That surface does not exist on a shipped page: real card interiors composite to `#e1def4`, because `.fx-card` adds another 3% ink over the panel. On the real ground the bottom step measured 4.22–4.24:1 in situ — under AA, on surfaces that carry a price. Dropping the base to `15, 12, 28` buys that back without spending chroma, because it is a violet-black rather than a grey. 2. The SPAN was 1.00 → .63, i.e. 0.19, against dark's 0.34. That is why nothing recedes on a light page: four steps crowded into a fifth of the range dark uses. The fix is to move the TOP down rather than push the bottom under AA — 0.92 → 0.60 restores a 0.32 span with every step still clearing 4.5:1 on `#e1def4`. Dark is untouched: every value here lives only in the light block. */ /* ── WP-4: the navy ink ladder ──────────────────────────────────────────────────────────── Solid hexes, not alphas over a ground. An alpha ink is a dark-theme device: it lets one value composite correctly over a range of near-black surfaces. In light the surfaces are white and the ladder wants to be exact. The navy is the fingerprint. Measured at hue 211-216, roughly 50% more chromatic than a neutral near-black — and slate ink is the single most legible reason a light theme reads as "Tailwind default" rather than as an instrument. Contrast measured on the CANVAS (#f6f8fa), the worse of the two grounds: --ink 16.32:1 --ink-dim 11.02:1 --ink-muted 5.08:1 --ink-faint 5.08:1 --ink-faint deliberately ALIASES --ink-muted. Light has no sub-AA decorative rung: dark's 0.45 step is legible on near-black, the same idea on white lands under 4.5:1. Anything that must recede further does it with isolation or role, never with a paler ink. #94A3B8 is banned as a muted ink here — it measures 2.56:1 on white, fails AA outright, and it is the token for every timestamp and placeholder in the app. */ --ink: #061b31; --ink-dim: #273951; /* C0: #5d6b80 measured 5.41:1 on white and cleared AA comfortably on paper. It is also the token carrying every timestamp, helper string and inactive parameter in the app, read at arm's length in a workshop with the door open. AA is a floor for a controlled environment, not a target for a glare-lit one. #475569 is 7.58:1 and still recedes behind --ink-dim. */ /* MEASURED gray-500. Stripe ships exactly THREE inks: gray-900 held in reserve for emphasis, gray-700 for body, gray-500 for secondary. Ours had four rungs and a decorative one. Note this value fails AA on the canvas (3.88:1) and passes on white (4.78:1) — that is not a defect, it is the system: Stripe puts no content directly on the canvas, so the ramp and the layout enforce each other. Anything set in this ink must sit on a surface. */ --ink-muted: #697386; --ink-faint: #5d6b80; /* The structural 1px that replaces blur. 1.18:1 against white — correct and deliberate: a keyline is an edge, not a contrast target. Do not "fix" it upward. */ /* ── C0: the keyline is load-bearing, so it has to be VISIBLE ──────────────────────────── These were #e5edf5 (1.18:1) and #cfd9e4 (1.43:1), with a note in the spec saying "a keyline is an edge, not a contrast target — do not fix it upward." That note was wrong, and it is worth saying why rather than quietly bumping the numbers. The light theme separates surfaces with ONE mechanism. Once --elevation-2 was deleted on the argument that cards carry a border instead of a shadow, the entire Z-axis rested on a single hairline at 1.18:1, over a canvas only 1.06:1 from the surface it sits on. Three imperceptible deltas stacked, with no second cue behind any of them. On a calibrated monitor that just holds. On a bay tablet under glare, or any uncalibrated screen, the card dissolves into the page and a calendar grid — which is nothing BUT these lines — reads as one flat plane. 1.48:1 and 1.97:1 are still quiet: at 1px they read as structure, not as a drawn box. The strong rung is for dense grids and table columns, where the line does real partitioning work rather than just terminating a card. */ /* The keyline IS the canvas colour. Stripe draws a card edge as 0 0 0 1px of gray-100 — the same value as the page — so the border is not a line drawn ON the card, it is the page showing through at its edge. That is the whole trick behind an edge that does not look applied. */ --keyline: #e3e8ee; --keyline-strong: #adbaca; --hair: #e5edf5; /* Glass. The 0.68 fill has a hard floor at 0.505 — below that a panel over the strongest orb can no longer hold --st-expected above 3:1. */ /* ── WP-4: glass becomes surface ────────────────────────────────────────────────────────── 46 consumers re-skin from this one edit, which is why the rebuild is affordable at all. The fill goes OPAQUE. A translucent white over a violet ground was the third attempt's central device and it is the reason light read as cheap: it samples a ground that has nothing worth sampling, and it costs a full backdrop-filter pass on a shop tablet to do it. The shadow goes to NONE, and that is the strongest consensus in the whole corpus — Stripe's own single `keyline` token, Linear, Carbon, Polaris and Notion all converge on border-first separation with content cards carrying no shadow at all. Given a border is present, a 18px blur is float on a dense ops board. The hover glow goes too. `0 0 20px rgba(124, 58, 237, 0.10)` is emission, and emission needs darkness to read as light; on white it is a smudge. Hover becomes contact: --elevation-1. */ --glass-bg: var(--surface); --glass-border: var(--keyline); --glass-shadow: none; --glass-shadow-hover: var(--elevation-1); /* Status. The dark trio cannot carry over — on a light card #34d399 is 1.4:1, #fbbf24 is 1.7:1, #f87171 is 2.3:1. Replaced, not adjusted. Validated all-pairs on #f1ebfc: deutan worst 8.4, normal worst 18.9, all >= 3:1. That is BETTER than the dark palette, which measures 6.5 on BREACH vs LOGGED — but the secondary-encoding rule stays, so that the two themes never disagree about what a control is allowed to do. */ --st-logged: #047857; --st-logged-soft: rgba(4, 120, 87, 0.10); --st-logged-line: rgba(4, 120, 87, 0.30); /* Amber, re-derived 2026-08-09. `#b87c05` measures 3.04:1 on the light audit surface and **2.50:1 in situ** over the strongest orb — under AA on rows that carry a price. `#8a5500` is already shipping as this theme's `--fin-warn-c` at 5.3:1, so this also collapses the app's two competing light ambers into one. Dark is untouched. */ --st-expected: #8a5500; --st-expected-soft: rgba(138, 85, 0, 0.10); --st-expected-line: rgba(138, 85, 0, 0.30); --st-breach: #b91c1c; --st-breach-soft: rgba(185, 28, 28, 0.10); --st-breach-line: rgba(185, 28, 28, 0.30); /* Fields. Not the dark values re-alphaed — the opposite construction, for the reason set out beside the dark block. The panel a field sits on is --glass-bg (68% white over the violet ground) or the modal gradient, both near-white, so the field goes brighter than its panel and takes a violet hairline that is actually visible against it. The focus ring darkens rather than lightens, because a pale glow on a pale panel is nothing. */ /* Flat white, not a gradient. A 160deg wash toward #f6f4fc is a marketing-page device and it tints every modal faintly violet — the exact drift this rebuild exists to end. */ --sheet-bg: var(--surface); /* ── WP-4: one accent, and it is BLUE ───────────────────────────────────────────────────── The Stripe blueprint's accent is #533afd, which is hue 253 — violet. The standing rule here is that everything violet becomes blue in light, everywhere, so the accent is re-derived on the shipping blue family instead. Measured: --accent hue 228 6.67:1 under white text (target was 6.18) --accent-hover hue 228 8.14:1 (target was 7.81) One token clears both the fill job and the line job, which is what makes a single accent possible at all. --accent is also 6.67:1 as text on white. Accent discipline: under 5% of screen area. That is Stripe's own stated position — they restrict colour BECAUSE colour freedom is an accessibility hazard — not a preference. */ /* Interaction blue. Focus is a DIFFERENT hue on purpose — see --focus-ring below. */ --accent: #2f4fd0; --accent-rgb: 47, 79, 208; --accent-hover: #2743b8; --accent-subtle: #c5d0f6; /* tint only. Never text, never a fill under text. */ /* ── WP-4: the weight clamp ─────────────────────────────────────────────────────────────── Four declarations, 678 sites. This is the whole payoff of pinning the rungs by value in Stage A: dark keeps 650/700/750/800 exactly as authored, light collapses them onto 600, and no site is touched twice. 700 is deleted in light. Nobody serious ships 700 in a dense light product UI — weight moves inversely to size in every system measured, and a 100-unit step is barely perceptible at 13px, so the real ladder is two rungs plus a tuning weight. 300 comes UP to 400: a 300 on white is a whisper, and the 11px floor exists because this is read at arm's length. */ --fw-300: 400; --fw-650: 600; --fw-700: 600; --fw-750: 600; --fw-800: 600; --field-bg: rgba(255, 255, 255, 0.85); --field-bg-hover: rgba(255, 255, 255, 1); --field-border: rgba(40, 81, 217, 0.22); --field-border-hover: rgba(40, 81, 217, 0.36); --field-border-focus: rgba(47, 79, 208, 0.9); /* Same SC 1.4.11 rule as dark's ring, and light was the weaker of the two: at α .22 the ring measured 1.41:1 against the white field it sits on (sampler, /vehicle-storage). α .7 reads 3.50:1 on the field and 3.25:1 on bare ground, which is the pair of surfaces a focused control can land on in this theme. */ --field-ring: rgba(47, 79, 208, 0.7); /* The finance surface's ink. See the channel block in the dark section for why this lives here rather than in lib/financeTokens.ts. The ladder is this file's own light ink, and the alphas are its light alphas — light does not reach 4.5:1 until .63, so the dark ramp's .49 bottom step would put every column head on Ekonomi and Fakturor under AA. */ --fin-ink-rgb: 27, 35, 61; --fin-a2: 0.82; --fin-a3: 0.72; --fin-a4: 0.63; /* Re-stepped, not mapped: the codemod's light amber is 4.45:1 here. 5.3:1. */ --fin-warn-c: #8a5500; --fin-well-c: rgba(29, 57, 149, 0.06); } /* There is deliberately no `@media (prefers-color-scheme: light)` block here. The OS preference is resolved once, in the inline script in index.html, which writes data-theme on before first paint — so this file declares each theme exactly once instead of carrying a second copy that has to be kept in step by hand. The app is a client-rendered SPA, so a no-JS path does not exist to regress. */ /* Tabular figures. Declared here because `.fig` is used in Routines.vue, SlotRail.vue and InspectionBooking.vue but was declared only in Routines.css — so on every page except Routines it did nothing, and columns of numbers that were meant to align did not. */ .fig { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ── Reduced motion, app-wide ────────────────────────────────────────────── Only 8 of 25 page stylesheets handled this, so most of the app animated regardless of the OS setting. Declared once here instead of seventeen more times. Note this also has to cancel the `scroll-behavior: smooth` that the `*` rule below sets — without the override, a user who asked for no motion still gets smooth scrolling. This removes MOVEMENT, not feedback: every hover in the app is expected to carry a colour/border cue as well as its 1px lift, so controls still respond visibly when the transform is switched off. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── The page eyebrow badge ──────────────────────────────────────────────── Bootstrap owns the bare class name `.badge` and every page declares it bare, so until now each one was half ours and half vendor: Bootstrap supplied `font-weight: 700`, `line-height: 1`, `white-space: nowrap` and — invisibly — `position: relative; top: -1px`, nudging every badge in the app up a pixel that nobody wrote. This declaration is self-contained and neutralises that. Pages may still override the colours (this file loads before the injected page stylesheets); the point is that the geometry no longer comes from a vendor sheet by accident. */ .badge { display: inline-block; position: static; top: auto; width: fit-content; padding: 3px 10px; border-radius: 50px; font-size: 0.62rem; font-weight: 600; line-height: 1.45; letter-spacing: 2px; white-space: nowrap; color: var(--astra-accent-soft); background: rgba(124, 58, 237, 0.12); border: 1px solid rgba(167, 139, 250, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* ── The two pieces of furniture every page was declaring for itself ─────── `.purple-gradient` (the accent half of a page title) was declared in NINETEEN page stylesheets and `.state-msg` (loading / empty / error line) in TWENTY-FOUR. Nineteen copies of one gradient is nineteen chances to disagree, and they already did: one page's "purple" gradient was emerald. Declared once here. Pages still win at equal specificity — this file loads before the injected page stylesheets — so a page that genuinely needs its own tone can still say so; it just no longer has to restate the default to get it. The page-local copies are being deleted as each page is rebuilt rather than in one 43-file sweep: several of those files are open in other work right now, and a redeclaration is harmless (same rule, later in the cascade) whereas a half-finished sweep is not. */ .purple-gradient { background: linear-gradient(to right, var(--astra-accent-soft), var(--astra-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .state-msg { margin-top: 3rem; text-align: center; font-size: 0.9375rem; color: var(--ink-faint); } .state-msg.error { color: var(--st-breach); } /* ── Text selection, app-wide ────────────────────────────────────────────── Nothing defined ::selection before this, so selecting anything painted the browser default: an opaque light box that keeps the text's own colour. Dim text on a dark surface — a hint line, a muted label — lands inside that box unreadable. Violet wash + forced white, so a selection is legible on glass, on the near-black page, and on the violet-tinted chips alike. Deliberately NOT paired with `user-select: none` on buttons: plenty of this app's buttons wrap real data (a phone-quote card is a