*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ══════════════════════════════════════════════════════════════════════ THIS FILE IS COPIED INTO landing/style.css. Edit here, then re-copy — `tests/frontend/landing-deploy.test.js` fails the moment the two differ. landing/preview.html is painted by the product's own stylesheet on purpose (see its head comment) and ships from a SEPARATE deploy, so it cannot link this one; a copy pinned by a test is what keeps it from silently aging. Nocturne — the dark shell. The palette is the design system's: an indigo-tinted ground (#161826) with a neutral ramp lifted off it, hairline dividers rather than boxes, and one accent. Every token below is a *role*, not a colour, which is what let the whole app flip from the white theme in one edit: nothing outside this block names a surface or an ink directly. ══════════════════════════════════════════════════════════════════════ */ :root { --bg: #161826; /* app ground */ --bg2: #1e2030; /* raised surface — rows, cards, inputs */ --bg3: #272a3b; /* hover / active tint */ --border: #2c2f40; /* hairline — the default divider */ --border-bright: #3f4356; /* the stronger rule: table heads, dashed drops */ /* ── Brand accent ────────────────────────────────────────────────────── --brand-primary is the ONLY colour the runtime overrides: the branding bootstrap in each page's and applyBranding() in app.js set it as an inline style on , which beats this :root declaration on the same element. Every other accent token derives from it here in CSS, so one injected value reaches all 85 var(--teal*) uses plus the literals that used to bypass them. Leaving it unset is the supported default and reproduces the original Curious Code teal exactly — which is why no Python or JS anywhere repeats this hex. #007f67 measures 4.96:1 against white; agents/branding.py clamps every company colour to at least 4.5:1 so a tenant's accent can never carry white text less legibly than this one does. color-mix() replaces the hand-written rgba() literals: it takes the alpha from a variable that is not known until runtime. Mixing with `transparent` in srgb is premultiplied per CSS Color 5, so 6% here is identical to the rgba(0,127,103,0.06) it replaces. */ --brand-primary: #007f67; --brand-primary-hover: #00a382; /* on a dark ground a hover BRIGHTENS */ /* The interface accent. A colour clamped for legibility against WHITE is by construction too dark to read against #161826 — #007f67 measures 3.5:1 there — so the accent every text, border and glyph use resolves through is the brand hue lifted toward white. Still derived, so a tenant's colour still reaches all 85 uses; --brand-primary itself stays the fill for the handful of places that carry white text on top of it. */ --teal: color-mix(in srgb, var(--brand-primary) 66%, #ffffff); --teal-dim: color-mix(in srgb, var(--brand-primary) 22%, transparent); --teal-glow: 0 0 0 1px var(--brand-primary), 0 0 24px color-mix(in srgb, var(--brand-primary) 22%, transparent); /* Semantic status green — NOT the brand accent, and deliberately not derived from it. It sits in a traffic light with --amber and --red (the favicon's done/running/error badges read these three straight out of this file), so letting a red- or orange-branded tenant paint "done" in their brand red would make it indistinguishable from "failed". Pinned for every company. Lifted with the rest of the palette: the white theme's #007f67 / #b36b00 / #c0392b are all under 4.5:1 on the dark ground. */ --ok: #2eb98d; /* .badge-high / .badge-ok paint with these. Derived from --ok rather than pinned so a change to the status green cannot leave its tint behind, and lifted from the white theme's 10%/30%: on the dark ground a 10% tint of anything is not visible at all. */ --ok-dim: color-mix(in srgb, var(--ok) 22%, transparent); --ok-line: color-mix(in srgb, var(--ok) 45%, transparent); --red-dim: color-mix(in srgb, var(--red) 20%, transparent); --red-line: color-mix(in srgb, var(--red) 42%, transparent); --amber-dim: color-mix(in srgb, var(--amber) 20%, transparent); --amber-line: color-mix(in srgb, var(--amber) 42%, transparent); --grey-dim: color-mix(in srgb, var(--grey) 22%, transparent); --grey-line: color-mix(in srgb, var(--grey) 45%, transparent); --amber: #d99b2e; --red: #e0645a; --grey: #75798c; --text: #e9e9ed; --text-dim: #9397ab; --text-faint: #75798c; /* the design's quietest label — column heads, meta */ /* Match traffic light. Lives here beside --ok/--amber/--red rather than in .match-dot's rule because the estimate dialog, the line-item table and the legend all paint it, and three copies eventually mean three colours. */ --match-exact: #2eb98d; --match-interpolated: #d99b2e; --match-ai: #e0645a; /* Over/under a recorded actual. Deliberately NOT --ok/--red: those drive the match-type traffic light two columns away, and an overrun is not a data-quality warning. Tokens rather than the literals they used to be so the light palette can restate them -- #2eb98d on a white ground measures 2.2:1. */ --variance-over: #e0645a; --variance-under: #2eb98d; /* The one non-traffic-light hue: the catalog's "from a price list" source badge. */ --blue: #8fa8e0; --blue-dim: rgba(122, 150, 214, .16); /* Depth. A scrim and two shadow depths, tokenised for the reason every colour above is: on a white ground a .55 black shadow reads as a smudge, and a near-black scrim as a blackout. Shadows are whole values, not just colours -- the light palette softens the alpha, not the geometry. */ --scrim: rgba(6, 7, 14, .68); --shadow-sm: 0 6px 18px rgba(0, 0, 0, .5); --shadow-md: 0 16px 40px rgba(0, 0, 0, .55); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55); /* Tells the UA which way to paint scrollbars, form controls and the caret. */ color-scheme: dark; --mono: 'Inter', system-ui, -apple-system, sans-serif; --sans: 'Inter', system-ui, -apple-system, sans-serif; --radius-sm: 4px; --radius-md: 8px; /* The rail's width, so body padding and the fixed aside cannot drift. */ --rail-w: 214px; /* Collapsed, the rail keeps only the glyphs: 14px of padding either side of a .rail-link's own 6px + its 15px icon. Narrower and the icons stop being centred on anything; wider and it stops reading as a strip. */ --rail-w-collapsed: 56px; /* The estimate chat's width, so the body padding and the fixed panel cannot drift — the same arrangement --rail-w has on the other side of the page. It is the DEFAULT rather than the value: the panel is resizable, and the preference is written back as an inline --chat-w on , which beats this declaration exactly as the branding bootstrap's --brand-primary does. 380px is what holds a two-or-three-sentence reply at 12.5px without the bubbles becoming a column of fragments. */ --chat-w: 380px; } /* ══════════════════════════════════════════════════════════════════════ Daybreak — the light palette. Nothing here is a new rule: it restates the SAME role tokens :root declares above, and every selector in this file and in every page's own