/* ============================================================================ theme.css — VAULT'S SINGLE SOURCE OF TRUTH FOR COLOUR, SHAPE AND TYPE. ============================================================================ WHAT THIS FILE IS Every colour, radius, shadow, type size and weight in Vault is declared here and nowhere else. Screens reference tokens; they do not declare values. The Branding screen (Administrative Controls -> Branding) renders this file's contents live, so it cannot drift from what ships. WHERE THE VALUES CAME FROM The neutrals, radii and card treatment are transcribed from screens-outreachforecast.jsx ("Outstanding Process Actions"), which Brian ruled on 2026-08-20 as the visual standard for the whole app. That screen is flat: 1px borders, no shadow on cards, tight radii. Shadows appear ONLY on layers that float above the page (popover, drawer, modal). That is the system. The accent is Harvey blue #196EA7 — the reference screen's local #1d4ed8 was used 4 times in 1 file, while #196EA7 appears 40 times across 8 files, and the chrome ruling fixes the sidebar and topbar to it. HOW TO ADD A COLOUR Don't, if an existing token fits. If one genuinely does not, add it HERE with a comment saying what it is for, add its dark-mode counterpart in the [data-theme="dark"] block below, and it will appear on the Branding screen automatically. A hex literal in a screen file is a bug. ALPHA Never hand-compute rgba from a hex. Use VaultAlpha("--accent", .12) in JS or color-mix(in srgb, var(--accent) 12%, transparent) in CSS. Both survive a theme switch; a hardcoded rgba does not. ============================================================================ */ :root { /* ---- NEUTRALS ----------------------------------------------------------- Transcribed from the reference screen (PAGE/INK/INK2/SUB/MUTE/LINE/LINE2). Cooler and a shade darker than the pre-8/20 set. --ink-3 and --line-strong are new: the reference distinguishes body text from de-emphasised text, and a control border from a card border. */ --bg: #EEF0F4; /* page background */ --canvas: #FFFFFF; /* base canvas inside cards */ --surface: #FFFFFF; /* card / panel surface */ --surface-2: #F4F6F9; /* hover, muted surface, table header */ --surface-3: #E9ECF1; /* pressed / selected track */ --line: #E3E6EC; /* card + panel borders */ --line-2: #E8EBF0; /* subtle dividers, table row rules */ --line-strong: #D6DBE3; /* input, select and button borders */ --ink: #16181D; /* primary text */ --ink-2: #3D4553; /* body text on cards */ --ink-3: #5B6472; /* de-emphasised body */ --muted: #7C8493; /* labels, kickers, captions -- darkened 8/20: #8B93A2 measured 2.71:1 on --bg, under the 3:1 floor */ --muted-2: #A8AFBA; /* placeholders, disabled */ /* ---- ACCENT — Harvey blue ---------------------------------------------- */ --accent: #196EA7; --accent-2: #135985; /* hover */ --accent-3: #0F4A70; /* pressed */ --accent-soft: #E3EEF6; /* tinted fills */ --accent-soft-2: #C9DFEE; /* tinted hover */ --accent-ink: #FFFFFF; /* text on accent */ /* ---- CHROME — sidebar + topbar ---------------------------------------- Ruled 2026-08-20: the rail and the header share one colour. Everything in them is white or a white alpha; the nav PNGs in icons/ are white artwork for the same reason. White on --accent measures 5.48:1. */ --chrome-bg: #196EA7; --chrome-ink: #FFFFFF; --chrome-ink-2: rgba(255,255,255,.74); /* subtitles, inactive nav labels */ --chrome-ink-3: rgba(255,255,255,.55); /* section captions */ --chrome-line: rgba(255,255,255,.18); /* dividers inside the chrome */ --chrome-hover: rgba(255,255,255,.10); --chrome-active: rgba(255,255,255,.17); /* active nav pill */ --chrome-marker: #FFFFFF; /* active-item edge marker */ /* ---- SEMANTIC ---------------------------------------------------------- */ --ok: #15803D; --ok-soft: #DCFCE7; --ok-line: #B8E6C9; --warn: #B45309; --warn-soft: #FEF3C7; --warn-line: #ECDFBA; --risk: #B91C1C; --risk-soft: #FDF2F2; --risk-line: #F3C8C8; --info: #1D4ED8; --info-soft: #DBEAFE; --info-line: #C5D9F8; /* ---- GOLD ------------------------------------------------------------- Not --warn. Vault uses a brighter gold as a THIRD STATE between good and bad — "5 to 9 days waiting", "Struggling", "Awaiting Approval" — and as a categorical accent. --warn (#B45309) is a burnt orange tuned for warning text; using it here read as an error rather than an in-between. Found in screens-research, screens-project-health and screens-healthdiag. */ --gold: #AD7B0E; /* darkened 8/20: #C9901C was 2.80:1 on --surface */ --gold-ink: #6B531B; /* text on --gold-soft */ --gold-soft: #FBF3E3; --gold-line: #F0DCB4; /* ---- PRIORITY — one H/M/L scale (R15) ---------------------------------- */ --prio-high: #B91C1C; --prio-med: #475569; --prio-low: #8B93A2; /* ---- SEQUENTIAL RAMP — C1..C9 ----------------------------------------- A DATA ramp, not the accent. Light-to-dark so a late-sequence code reads as late at a glance. Transcribed from the reference screen's SEGC. Anything ordered (call codes, stages, cohorts) uses this; nothing else should. */ /* MONOTONIC light -> dark. The previous set ran two cycles (C1-C4 dark, then C5 jumped back to light) because the mock only defined four steps and the extension repeated them -- so a C9 did not read as later than a C4, which is the one thing an ordered ramp has to do. */ --seq-1: #BFD3F7; --seq-2: #A6C1F3; --seq-3: #8CAFEF; --seq-4: #6E97E8; --seq-5: #4F7FD9; --seq-6: #3563C4; --seq-7: #2449A6; --seq-8: #183583; --seq-9: #0F2352; /* ---- CATEGORICAL — unordered groups ------------------------------------ For series with no inherent order (owners, sectors, modules). Distinct in hue, matched in weight, and legible on --surface. */ --cat-1: #475569; --cat-2: #1E40AF; --cat-3: #7C5CD0; --cat-4: #1F9D57; --cat-5: #B45309; --cat-6: #1993C4; --cat-7: #B4407A; /* ---- MEETING TYPES ------------------------------------------------------ Consumed by classifyEvent() in lib-actions-feed.js. Kept as tokens so the Calendar, the Notification Center and the feed engine cannot disagree. */ --evt-update: #1F9D57; --evt-conf: #7C5CD0; --evt-intro: #2E77C2; --evt-call: #1993C4; --evt-meeting: #64748B; --evt-ooo: #94A3B5; /* ---- SHAPE ------------------------------------------------------------- Four steps. The reference screen used 12 different radii; these are the four that carried real meaning. --radius / --radius-lg are kept as aliases because index.html's .card and .btn rules already reference them. */ --r-chip: 4px; /* tags, code chips, swatches */ --r-ctl: 7px; /* buttons, inputs, selects, segmented controls */ --r-card: 10px; /* cards, panels, popovers, modals */ --r-pill: 999px; /* pills, badges, avatars */ --radius: var(--r-ctl); --radius-lg: var(--r-card); --radius-xl: var(--r-card); /* ---- ELEVATION --------------------------------------------------------- CARDS ARE FLAT. Only layers that float above the page get a shadow. If a shadow is being added to something that sits IN the page, the answer is a border. */ /* Modal backdrop. NOT --ink: --ink inverts to near-white in dark mode, so a scrim built from it becomes a white veil over a dark page -- the opposite of what a scrim does. This stays dark in both themes and only deepens. */ --scrim: rgba(15, 18, 24, .42); --shadow-none: none; --shadow-pop: 0 10px 34px rgba(15,18,24,.16); /* popovers, dropdowns */ --shadow-drawer: -12px 0 40px rgba(15,18,24,.25); /* right-hand drawers */ --shadow-modal: 0 20px 60px rgba(15,18,24,.28); /* centred modals */ --shadow: var(--shadow-none); /* alias — legacy .card rule */ --shadow-md: var(--shadow-pop); /* alias */ --shadow-lg: var(--shadow-modal); /* alias */ /* ---- TYPE SCALE -------------------------------------------------------- Eight steps replacing 15 ad-hoc sizes. */ --t-kicker: 9.5px; /* uppercase eyebrow */ --t-micro: 11px; /* dense table meta, chip text */ --t-small: 11.5px; /* captions, secondary rows */ --t-body: 12.5px; /* default body and table cells */ --t-body-lg: 13px; /* controls, buttons, inputs */ --t-card: 15px; /* card titles */ --t-section: 17px; /* section headings */ --t-page: 22px; /* the screen's H1 */ --w-regular: 500; --w-medium: 600; --w-bold: 700; /* Kicker spec — one spec, replacing 48. Tracking in px, as the reference does. */ --kicker-size: var(--t-kicker); --kicker-track: 1.2px; --kicker-weight: var(--w-bold); --kicker-color: var(--muted); --row-h: 38px; --sidebar-w: 232px; --topbar-h: 56px; --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Inter", "Segoe UI", system-ui, sans-serif; --f-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Inter", "Segoe UI", system-ui, sans-serif; --f-mono: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", Consolas, monospace; /* ---- LEGACY ALIASES --------------------------------------------------- Names that existed before the token sweep and are still referenced by screens this pass has not reached yet. Every one of these is a var() alias, NOT a literal, so it follows the theme and the dark block with no second declaration to keep in step. Three of these I broke: --topbar-bg, --compare-2 and --compare-3 were in the old :root block and I dropped them without checking who read them. --topbar-bg is why the shell header rendered transparent with white text on it. The remaining five were ALREADY undefined before this session — --danger has nine call sites and has never resolved to anything. These are a bridge. As each screen is swept, its call sites should move to the real token and the alias should come out. */ --topbar-bg: var(--chrome-bg); --compare-2: var(--cat-5); --compare-3: var(--cat-3); --danger: var(--risk); --danger-soft: var(--risk-soft); --accent-strong: var(--accent-2); --mono: var(--f-mono); /* ---- END LEGACY ALIASES ---- */ } /* ============================================================================ DARK THEME app.jsx has written data-theme="dark" since the redesign; until now nothing consumed it. Only the tokens flip — no screen needs a dark-specific rule. The neutral ramp INVERTS but is not mirrored: dark surfaces sit slightly above the page rather than below it, so --surface is LIGHTER than --bg here and darker in light mode. Semantic colours lift in lightness because the light-mode versions are tuned for contrast on white and go muddy on near black. ============================================================================ */ html[data-theme="dark"] { --bg: #101318; --canvas: #171B22; --surface: #171B22; --surface-2: #1E232C; --surface-3: #262C37; --line: #2A303A; --line-2: #232830; --line-strong: #39414E; --ink: #EEF0F4; --ink-2: #C4CBD6; --ink-3: #9AA3B2; --muted: #7A8394; --muted-2: #5C6575; --accent: #4E9FD4; --accent-2: #6FB4E0; --accent-3: #8CC6EA; --accent-soft: #16303F; --accent-soft-2: #1D4257; --accent-ink: #0B1016; /* The chrome stays the darkest surface rather than going Harvey blue — a saturated blue rail against a near-black page reads as a light-mode panel that failed to switch. */ --chrome-bg: #12161C; --chrome-ink: #EEF0F4; --chrome-ink-2: rgba(238,240,244,.70); --chrome-ink-3: rgba(238,240,244,.50); --chrome-line: rgba(238,240,244,.12); --chrome-hover: rgba(238,240,244,.07); --chrome-active: rgba(78,159,212,.22); --chrome-marker: #4E9FD4; --ok: #4ADE80; --ok-soft: #10281A; --ok-line: #1E5236; --warn: #FBBF24; --warn-soft: #2A1F0A; --warn-line: #5A4312; --risk: #F87171; --risk-soft: #2B1315; --risk-line: #5E2529; --info: #7CA7F5; --info-soft: #131E36; --info-line: #27407A; --gold: #E8B94A; --gold-ink: #E5D6A8; --gold-soft: #2A2109; --gold-line: #574616; --prio-high: #F87171; --prio-med: #9AA3B2; --prio-low: #6B7484; /* Monotonic dark -> light, mirroring the light ramp's direction against its own background. --seq-5 was #60A5FA in BOTH themes, which is the signature of a value that never got a dark counterpart. */ --seq-1: #12315E; --seq-2: #1A4176; --seq-3: #22528E; --seq-4: #2C63A6; --seq-5: #3D7ABE; --seq-6: #5A93CE; --seq-7: #7DAEDD; --seq-8: #A6C8E9; --seq-9: #CFE1F4; /* --cat-3 pulled further violet and --cat-6 further teal: against --cat-2 they measured 58 and 48 apart, which is inside the range where two series read as the same colour on a chart. Nothing under 60 now. */ --cat-1: #9AA3B2; --cat-2: #7CA7F5; --cat-3: #C08AF0; --cat-4: #4ADE80; --cat-5: #FBBF24; --cat-6: #3FD0C9; --cat-7: #E08AB4; --evt-update: #4ADE80; --evt-conf: #B49BEA; --evt-intro: #7CA7F5; --evt-call: #56BFE4; --evt-meeting: #9AA3B2; --evt-ooo: #6B7484; /* Deeper, not inverted: a backdrop must darken what is behind it in EITHER theme, and a dark page needs more of it to read as separation. */ --scrim: rgba(0, 0, 0, .62); /* Shadows carry almost no signal on a dark page; the borders do the work. */ --shadow-pop: 0 10px 34px rgba(0,0,0,.55); --shadow-drawer: -12px 0 40px rgba(0,0,0,.65); --shadow-modal: 0 20px 60px rgba(0,0,0,.70); } html[data-theme="dark"] img.nav-art { filter: none; } /* Density — unchanged, kept here so every dimension token lives in one file. */ html[data-density="compact"] { --row-h: 32px; } html[data-density="comfortable"] { --row-h: 42px; } /* ============================================================================ SHARED ELEMENT CLASSES One implementation per element. Screens should reach for these before they write an inline style. Each is rendered on the Branding screen. ============================================================================ */ /* Kicker / eyebrow — replaces 48 separate specs. */ .v-kicker { font-size: var(--kicker-size); font-weight: var(--kicker-weight); letter-spacing: var(--kicker-track); text-transform: uppercase; color: var(--kicker-color); } /* Card — flat, bordered, radius 10. No shadow, by design. */ .v-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-none); } .v-card-pad { padding: 14px 16px; } /* Floating layers — the only things that get elevation. */ .v-pop { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-pop); } .v-drawer { background: var(--surface); box-shadow: var(--shadow-drawer); } .v-modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-modal); } /* Headings */ .v-h1 { font-size: var(--t-page); font-weight: var(--w-medium); color: var(--ink); letter-spacing: -.02em; margin: 0; } .v-h2 { font-size: var(--t-section); font-weight: var(--w-medium); color: var(--ink); letter-spacing: -.01em; margin: 0; } .v-h3 { font-size: var(--t-card); font-weight: var(--w-medium); color: var(--ink); margin: 0; } /* Empty state — one voice: "Nothing ...", sentence case, terminal period. */ .v-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: var(--t-body); } /* Table surface — usable by real AND by CSS-grid pseudo-tables, so the 25 grid-based tables render identically to the 6 real ones without being rewritten. Behaviour (sticky, sort, freeze) stays with table.dt for now. */ .v-thead { font-size: var(--t-micro); font-weight: var(--w-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); } .v-trow { border-bottom: 1px solid var(--line-2); font-size: var(--t-body); color: var(--ink-2); } .v-trow:hover { background: var(--surface-2); }