/* ============================================================================ Vanmech Workflow — design tokens ---------------------------------------------------------------------------- Dark, low-glare theme. Staff sit on these screens for hours, so: - no pure black and no pure white (both raise perceived glare) - text tops out at ~87% white on a mid-dark ground - the brand lime is an ACCENT, never a fill: focus, totals, active state - 15px base and a taller line-height; money in tabular figures Brand greens are sampled from the letterhead in Intra_Quote.xlsx: logo body #5cc40b rules #9fff3b mid #70c62a Rules: no bare px, no bare colours in component styles. New value -> new token. ========================================================================== */ :root{ /* One scale, tuned here and nowhere else. Sized for operators who spend the working day on these screens rather than for maximum rows per screen. */ --sp-1:3px; --sp-2:6px; --sp-3:9px; --sp-4:13px; --sp-5:18px; --sp-6:24px; --sp-7:32px; --sp-8:44px; --sp-9:64px; --fs-xs:13px; --fs-sm:14px; --fs-md:15px; --fs-base:17px; --fs-lg:21px; --fs-xl:30px; --fs-2xl:40px; --lh:1.55; --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* dark ramp — surfaces */ --c-bg:#141719; /* app ground */ --c-panel:#1c2023; /* cards, tables */ --c-raise:#23282c; /* header rows, chips*/ --c-hover:#282e33; --c-line:#31383e; /* borders */ --c-line-soft:#262c31; /* light ramp — ink */ --c-ink:#dee3e7; /* primary text ~87% */ --c-ink-2:#aeb7be; /* secondary */ --c-ink-3:#7d868e; /* tertiary / labels */ --c-ink-4:#59626a; /* disabled, grips */ /* brand */ --c-lime:#9fff3b; --c-lime-2:#7ee02a; --c-lime-3:#5cc40b; --c-lime-dim:rgba(159,255,59,.14); --c-lime-edge:rgba(159,255,59,.42); --c-warn:#ff8a5c; --c-warn-bg:rgba(255,138,92,.13); /* Late is its own signal, not the warning colour: a job three days from due and a job 121 days past it must not read as the same thing at a glance. */ --c-late:#ff6b6b; --c-late-bg:rgba(255,107,107,.15); --c-late-edge:rgba(255,107,107,.4); --c-ok:var(--c-lime-2); --max-w:1680px; --thumb:52px; /* the file preview, and the glyph box beside it */ --bar-h:70px; --jump-w:520px; --radius:14px; --radius-md:10px; --radius-sm:7px; --radius-pill:99px; --shadow:0 6px 24px rgba(0,0,0,.34); --ring:0 0 0 3px var(--c-lime-dim); --t:.14s; } /* ---- light and dark ------------------------------------------------------ Q21, answered 15 Sep 2026: both, saved per person, with dark grey where the dark theme uses lime ("for now — we'll get feedback during trial"). Each colour is defined ONCE, below, as `light-dark(LIGHT, DARK)`, and `color-scheme` chooses which half applies — so a light palette and a dark palette cannot drift apart, which is how `.btn` went wrong. It also flips the browser's own controls: date pickers, selects, scrollbars. The plain `:root` tokens above are the dark palette and stay as the fallback. A browser without `light-dark()` (pre-2024) ignores this whole block and keeps the dark theme it has always had, rather than rendering invalid colours. `core/test_stylesheet.py` requires every dark half here to equal its plain token, so the fallback cannot go stale. Light greys were chosen by measured contrast: body text ~16:1 on a panel, labels 6:1, the primary button label 11.8:1, warning and late text >5:1. */ @supports (color: light-dark(#000, #fff)) { :root{ color-scheme:light dark; --c-bg:light-dark(#eef0f2, #141719); --c-panel:light-dark(#fbfbfc, #1c2023); --c-raise:light-dark(#f1f3f5, #23282c); --c-hover:light-dark(#e7eaed, #282e33); --c-line:light-dark(#cfd5da, #31383e); --c-line-soft:light-dark(#e1e5e8, #262c31); --c-ink:light-dark(#1a1e21, #dee3e7); --c-ink-2:light-dark(#3a4248, #aeb7be); --c-ink-3:light-dark(#59626a, #7d868e); --c-ink-4:light-dark(#6b747c, #59626a); /* The brand accents. Dark grey in the light theme, lime in the dark. */ --c-lime:light-dark(#2a2f33, #9fff3b); --c-lime-2:light-dark(#3b4248, #7ee02a); --c-lime-3:light-dark(#2a2f33, #5cc40b); --c-lime-dim:light-dark(rgba(42,47,51,.08), rgba(159,255,59,.14)); --c-lime-edge:light-dark(rgba(42,47,51,.38), rgba(159,255,59,.42)); /* Warning and late must darken on a light ground: the dark theme's #ff8a5c on near-white is 2.4:1 and unreadable as text. */ --c-warn:light-dark(#a8420a, #ff8a5c); --c-warn-bg:light-dark(rgba(168,66,10,.10), rgba(255,138,92,.13)); --c-late:light-dark(#bb222a, #ff6b6b); --c-late-bg:light-dark(rgba(187,34,42,.10), rgba(255,107,107,.15)); --c-late-edge:light-dark(rgba(187,34,42,.38), rgba(255,107,107,.4)); --shadow:0 6px 24px light-dark(rgba(16,24,32,.10), rgba(0,0,0,.34)); } /* A person's saved choice overrides their operating system. */ :root[data-theme="light"]{color-scheme:light} :root[data-theme="dark"]{color-scheme:dark} } *{box-sizing:border-box} /* The fallback for browsers without light-dark(): the dark theme, as before. */ html{color-scheme:dark} body{margin:0;background:var(--c-bg);color:var(--c-ink); font:var(--fs-base)/var(--lh) var(--font);-webkit-font-smoothing:antialiased} h1{font-size:var(--fs-xl);margin:0 0 var(--sp-2);letter-spacing:-.4px;font-weight:650} .muted{color:var(--c-ink-3)} .warn{color:var(--c-warn);font-weight:600} .money{font-variant-numeric:tabular-nums;letter-spacing:.1px} .r{text-align:right} ::selection{background:var(--c-lime-dim)} /* ---- the trial banner (F7) ----------------------------------------------- Above the sticky app bar rather than inside it: it is a statement about the whole database, not a control, and it should scroll away once read instead of taking a permanent slice of a small screen. Warn colours, because it is a warning — but not the `late` red, which means a specific overdue job. */ .trial-bar{background:var(--c-warn-bg);border-bottom:1px solid var(--c-warn); color:var(--c-ink-2);font-size:var(--fs-sm);line-height:var(--lh); padding:var(--sp-3) var(--sp-7)} .trial-bar strong{color:var(--c-warn)} /* ---- chrome ------------------------------------------------------------- */ /* `flex-wrap` because the header is nine items wide on the board — brand, jump bar, a five-control filter form, four links and the user's name — and the rule written to make it responsive (`.jump{flex-basis:100%;order:9}`, below) was inert without it: with no wrap, `flex-basis:100%` only makes an item that shrinks and `order` only reshuffles the single row. Eight other flex containers in this file wrap; this was the one that needed it most. */ .bar{display:flex;flex-wrap:wrap;align-items:center;min-height:var(--bar-h); gap:var(--sp-4) var(--sp-5);padding:var(--sp-4) var(--sp-7); background:var(--c-panel);border-bottom:1px solid var(--c-line); position:sticky;top:0;z-index:5} .brand{display:flex;align-items:center;gap:var(--sp-4);font-weight:700; text-decoration:none;color:var(--c-ink);letter-spacing:-.3px;font-size:var(--fs-lg)} .brand img{height:36px;width:auto;display:block} .brand span{color:var(--c-ink-3);font-weight:400} .bar nav{display:flex;gap:var(--sp-3)} .bar nav a{color:var(--c-ink-2);text-decoration:none;font-size:var(--fs-md); padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-sm)} .bar nav a:hover{color:var(--c-lime);background:var(--c-raise)} main{max-width:var(--max-w);margin:var(--sp-8) auto var(--sp-9);padding:0 var(--sp-7)} /* ---- tables ------------------------------------------------------------- */ .search{width:100%;padding:var(--sp-4) var(--sp-5);border:1px solid var(--c-line); border-radius:var(--radius-md);margin:var(--sp-5) 0 var(--sp-6); background:var(--c-panel);color:var(--c-ink);font-size:var(--fs-base)} .search:focus{outline:none;border-color:var(--c-lime-edge);box-shadow:var(--ring)} .search::placeholder{color:var(--c-ink-4)} /* ---- inputs ------------------------------------------------------------- */ input{font:inherit;color:var(--c-ink);border:1px solid transparent;background:transparent; padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-sm);width:100%; transition:border-color var(--t),background var(--t)} input:hover{border-color:var(--c-line)} /* A checkbox obeys `width` but not `padding` or `font`, so the rule above stretched every one of them to its container's full width. Chrome then draws the box centred in that width, which put the terms checkboxes in the middle of the panel with their labels pushed onto the next line. Fixed here, on the element, rather than per component: it was fixed once on `.field-check` and the next screen to use a checkbox inherited the bug again. */ input[type=checkbox],input[type=radio]{width:auto} input:focus{outline:none;border-color:var(--c-lime-edge);background:var(--c-bg); box-shadow:var(--ring);position:relative;z-index:2} input.num{text-align:right;font-variant-numeric:tabular-nums;max-width:140px} tr:focus-within>td{background:var(--c-hover)} /* ---- buttons ------------------------------------------------------------ ONE definition, here, in the buttons section. There were two: this one and a second, unscoped `.btn` inside the login-card block, where every neighbouring rule is correctly prefixed `.auth-card`. Equal specificity and later in the file, so the login card's button was silently the button for the whole application — all eleven `class="btn"` controls, every one of them the committing action of a form. The merge was not merely cosmetic. The two `:hover` rules combined into one that took `color:var(--c-lime)` from here and `background:var(--c-lime-2)` from there: lime text on lime fill, **1.34:1**, where resting is 8.02:1. The label of every primary button in the app disappeared on hover, and neither rule was wrong by itself. Two roles now, named rather than inherited from whichever rule came last. ------------------------------------------------------------------------ */ /* The committing action: submit, accept, issue, save. */ /* `display` and `text-decoration` because both button classes are used on `` as well as `