/* ===================================================================== assets/tokens.css — the Vercru design tokens, and nothing else --------------------------------------------------------------------- The block between the two SPEC markers is the rebrand spec §2.1 verbatim. Every colour on every page comes from here: no page, script or component carries a hex value of its own. If a colour is missing, add a token here — never a literal somewhere else. Theme: the portal opens light. is set before first paint by assets/theme.js (the person's choice, or the system's when they picked "Match system"). The Wall view pins dark. Status colours are for status only (§2.3): on plan / on site / late / no show and their kin. Never decoration, never a category colour. ===================================================================== */ /* ---------- fonts (self-hosted; the kiosk lives on bad site signal) ---------- */ @font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/public-sans-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/public-sans-latin-500-normal.woff2') format('woff2')} @font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/public-sans-latin-600-normal.woff2') format('woff2')} @font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/public-sans-latin-700-normal.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')} /* ---- SPEC §2.1 (verbatim) ---- */ :root, [data-theme="light"] { /* brand + surfaces */ --vc-ground: #F4F4F2; /* Concrete: page background */ --vc-surface: #FFFFFF; /* Paper: cards, tables, inputs */ --vc-line: #DCDDDF; /* card borders */ --vc-hairline: #E9EAEC; /* row rules */ --vc-ink: #0E1116; /* Graphite: text, primary buttons (18.9:1 on surface) */ --vc-muted: #535A64; /* Slate: secondary text (7.0:1) */ --vc-accent: #2446C7; /* Registry: focus ring, links, selected tab ONLY (7.6:1) */ --vc-bar: #0E1116; /* top bar, always Graphite in both themes */ --vc-bar-ink: #FFFFFF; --vc-bar-muted:#9BA3AE; --vc-bar-accent:#6E8BFF; /* selected-workspace underline on the bar */ --vc-btn-sec-border: #C4C7CC; /* status (never use for anything else) */ --vc-plan: #535A64; /* on plan · open square · 7.0 */ --vc-ok: #1E7B4F; /* on site, cleared, valid · solid square · 5.2 */ --vc-warn: #9A6200; /* late, expiring, pending · triangle · 5.1 */ --vc-alert: #C0262D; /* no show, blocked, failed · cross · 5.9 */ } [data-theme="dark"] { --vc-ground: #0E1116; --vc-surface: #14181E; --vc-line: #2A3038; --vc-hairline: #1E232A; --vc-ink: #E8EAED; /* 14.8 */ --vc-muted: #9BA3AE; /* 7.0 */ --vc-accent: #6E8BFF; /* 5.8 */ --vc-btn-sec-border: #3A414B; --vc-plan: #9BA3AE; /* 7.0 */ --vc-ok: #3FB67F; /* 7.0 */ --vc-warn: #E0A63A; /* 8.2 */ --vc-alert: #F2555A; /* 5.3 */ } /* ---- end SPEC §2.1 ---- */ /* ---------- derived: type, shape, and the few mixes the UI needs ---------- Everything below is built from the spec tokens, so it follows the theme by itself. The washes are the only tints allowed: a status wash sits behind a status word, never on its own. */ :root{ --vc-font: "Public Sans", system-ui, sans-serif; --vc-mono: "IBM Plex Mono", ui-monospace, monospace; --vc-radius: 2px; --vc-bar-line: #2A3038; /* outlines on the Graphite bar: the bar is Graphite in both themes, so this is too */ --vc-wash: color-mix(in srgb, var(--vc-ink) 4%, transparent); /* row hover, quiet fills */ --vc-wash-2: color-mix(in srgb, var(--vc-ink) 8%, transparent); --vc-accent-wash:color-mix(in srgb, var(--vc-accent) 9%, transparent); /* no status washes: a status is its shape and its coloured word on the plain surface */ --vc-scrim: color-mix(in srgb, #0E1116 55%, transparent); /* behind a modal, both themes */ /* type scale (§2.2): size / line-height */ --vc-fs-display:40px; --vc-lh-display:44px; --vc-fs-h1:28px; --vc-lh-h1:34px; --vc-fs-h2:20px; --vc-lh-h2:26px; --vc-fs-body:15px; --vc-lh-body:22px; --vc-fs-small:13px; --vc-lh-small:18px; --vc-fs-kpi:30px; --vc-lh-kpi:32px; --vc-fs-wall:96px; --vc-lh-wall:96px; --vc-fs-mono:14px; --vc-lh-mono:20px; --vc-fs-label:11px; --vc-lh-label:14px; }