/* ===================================================================== Leitco — tokens (the slate house style) --------------------------------------------------------------------- LAYER 1 of 3. Custom properties and the two font faces, nothing else, so it is safe to drop into any page in the estate. style/tokens.css this file style/chrome.css masthead, tabs, sub-nav, the drafting grid. Every class lc- prefixed, so it cannot collide. style/ui.css the component library (.card .btn .tile .pill). ONLY for pages we own — never viewer.html or tool.html, whose classes clash. COLOUR. These blocks are the only place a colour is written. Every value comes from the brand revamp guides or is mixed from them by the rule shown. Nothing is carried over from the charcoal-and-gold scheme (Tyler, 15 September 2026). [G] as written in the guides [C] a guide value corrected, because it failed its own contrast rule [D] derived from the values above it, with color-mix() The full reference, with the decision log, is docs/DESIGN.md. The old leitco-tokens.css stays beside this one until the Scans viewer and the Zoning tool move over (step 2). They still load that file. ===================================================================== */ @font-face{font-family:"Leitco Heros";font-style:normal;font-weight:400;font-display:swap; src:url("fonts/texgyreheros-regular.otf") format("opentype")} @font-face{font-family:"Leitco Heros";font-style:normal;font-weight:700;font-display:swap; src:url("fonts/texgyreheros-bold.otf") format("opentype")} :root{ color-scheme:light; /* the brand: the same in both themes */ --slate:#2C4A5E; /* [G] the one accent */ --white:#FFFFFF; /* [G] */ /* light */ --paper:#F7F6F2; /* [G] page */ --surface:#FFFFFF; /* [G] cards, panels, masthead */ --surface-2:#FFFFFF; /* [G] menus: light separates by shadow */ --sunk:color-mix(in srgb,var(--ink) 4%,var(--paper)); /* [D] wells, hover */ --ink:#262624; /* [G] headings, body */ --ink-2:#5E5E58; /* [G] secondary text */ --ink-3:#686861; /* [C] guide #8C8C84 was 3.13:1 on paper */ --line:#8C8C84; /* [G] input and button borders, 3.3:1 */ --accent:#2C4A5E; /* [G] slate */ --on-accent:#FFFFFF; /* [G] text on slate, 9.34:1 */ --ok:#3B6D4A; /* [G] */ --warn:#8A5A12; /* [G] */ --stop:#8C3A32; /* [G] */ --tint:10%; /* [G] status backgrounds are the colour at 10% */ --grid-strength:7%; /* the drafting grid, shipped 15 Sep 2026 */ --shadow-raised:0 1px 2px rgba(0,0,0,.05),0 6px 16px rgba(0,0,0,.07); /* [G] */ --shadow-float:0 4px 8px rgba(0,0,0,.07),0 16px 40px rgba(0,0,0,.14); /* [G] */ /* type, space, shape, motion — no colour */ --f-ui:"Leitco Heros","Helvetica Neue",Helvetica,Arial,sans-serif; --f-num:Consolas,"SFMono-Regular",Menlo,monospace; --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px; --r-sm:6px; --r-md:10px; --r-lg:14px; --dur-fast:150ms; --dur-base:220ms; --dur-slow:300ms; --ease:cubic-bezier(0.2,0.8,0.2,1); --grid-fade:linear-gradient(to bottom,#000 0%,#000 30%,rgba(0,0,0,.25) 100%); /* a mask: only its alpha is used */ --wrap-w:1280px; } /* dark: the guide's dark set, with its contrast failures corrected */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme:dark; --paper:#141413; /* [G] */ --surface:#1D1D1B; /* [G] one step lighter */ --surface-2:#262624; /* [G] two steps lighter, plus a border */ --sunk:color-mix(in srgb,var(--paper) 50%,var(--surface)); /* [D] */ --ink:#EDECE6; /* [G] */ --ink-2:#A9A89F; /* [G] */ --ink-3:#93928B; /* [C] guide #7A7973 was 3.47:1 on a sheet */ --line:#7B7A76; /* [D] ink at 45% over surface, 3.9:1 */ --accent:#7FA2BA; /* [C] guide #456C85 was 3.28:1 */ --on-accent:#141413; /* [G] paper on light slate, 6.83:1 */ --ok:#7DB38C; /* [C] the guide left light values here */ --warn:#D6A35A; /* [C] */ --stop:#E08A7E; /* [C] */ --tint:13%; --grid-strength:6%; --shadow-raised:none; /* [G] shadows do not read on dark */ --shadow-float:0 16px 44px rgba(0,0,0,.55); /* [G] */ } } :root[data-theme="dark"],.force-dark{ color-scheme:dark; --paper:#141413; --surface:#1D1D1B; --surface-2:#262624; --sunk:color-mix(in srgb,var(--paper) 50%,var(--surface)); --ink:#EDECE6; --ink-2:#A9A89F; --ink-3:#93928B; --line:#7B7A76; --accent:#7FA2BA; --on-accent:#141413; --ok:#7DB38C; --warn:#D6A35A; --stop:#E08A7E; --tint:13%; --grid-strength:6%; --shadow-raised:none; --shadow-float:0 16px 44px rgba(0,0,0,.55); } /* the light values again, for a panel that must stay light inside a dark page (the House style screen shows both) */ .force-light{ color-scheme:light; --paper:#F7F6F2; --surface:#FFFFFF; --surface-2:#FFFFFF; --sunk:color-mix(in srgb,var(--ink) 4%,var(--paper)); --ink:#262624; --ink-2:#5E5E58; --ink-3:#686861; --line:#8C8C84; --accent:#2C4A5E; --on-accent:#FFFFFF; --ok:#3B6D4A; --warn:#8A5A12; --stop:#8C3A32; --tint:10%; --grid-strength:7%; --shadow-raised:0 1px 2px rgba(0,0,0,.05),0 6px 16px rgba(0,0,0,.07); --shadow-float:0 4px 8px rgba(0,0,0,.07),0 16px 40px rgba(0,0,0,.14); } /* PRINT. Paper is paper. The submission checklist is printed on a real A4 sheet, and a dark theme sent to a printer empties a cartridge and reads badly — so print always uses the light set, whatever the screen is showing. The one place the palette is deliberately written twice, and the only value that differs is the page itself: on screen it is #F7F6F2, on paper it is nothing at all. */ @media print{ :root,:root[data-theme="dark"],.force-dark{ color-scheme:light; --paper:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFFFFF; --sunk:#F2F1ED; --ink:#262624; --ink-2:#5E5E58; --ink-3:#686861; --line:#8C8C84; --accent:#2C4A5E; --on-accent:#FFFFFF; --ok:#3B6D4A; --warn:#8A5A12; --stop:#8C3A32; --tint:10%; --shadow-raised:none; --shadow-float:none; } } /* [D] Declared on every element that sets base colours, so they are recomputed there: a custom property inherits its computed value, so declaring these on :root alone would leave .force-dark with the light results. */ :root,.force-dark,.force-light{ --hair:color-mix(in srgb,var(--ink) 10%,transparent); --accent-hover:color-mix(in srgb,var(--accent) 65%,var(--ink)); /* Solid, not transparent (Tyler, 28 September 2026) — these back pills, chips and the nav's active tint. Mixed against --surface rather than transparent: the same pixels as before on an ordinary white/near-black card, but opaque, so the plan grid pattern behind a pill (or anything else painted on the page ground, not a card) can't show through and wash the colour out. --hair and --accent-ring stay transparent on purpose — a hairline border and a focus ring are meant to sit as a faint tint OVER whatever they cross, not read as a solid chip. */ --accent-soft:color-mix(in srgb,var(--accent) 13%,var(--surface)); --accent-ring:color-mix(in srgb,var(--accent) 40%,transparent); --ok-bg:color-mix(in srgb,var(--ok) var(--tint),var(--surface)); --warn-bg:color-mix(in srgb,var(--warn) var(--tint),var(--surface)); --stop-bg:color-mix(in srgb,var(--stop) var(--tint),var(--surface)); --idle:var(--ink-2); --idle-bg:color-mix(in srgb,var(--ink) 7%,var(--surface)); --grid-heavy:color-mix(in srgb,var(--accent) var(--grid-strength),transparent); --grid-fine:color-mix(in srgb,var(--accent) calc(var(--grid-strength) / 2),transparent); --glass:color-mix(in srgb,var(--surface) 92%,transparent); /* the start-up heartbeat: the grid lit, Faint, from the block mark (Tyler, 16 September 2026). One value in both themes — unlike --grid-strength this was chosen once, directly, not per theme. */ --wave-strength:24%; --wave-heavy:color-mix(in srgb,var(--accent) var(--wave-strength),transparent); --wave-fine:color-mix(in srgb,var(--accent) calc(var(--wave-strength) / 2),transparent); --wave-wash:color-mix(in srgb,var(--accent) calc(var(--wave-strength) / 7),transparent); }