/* ============================================================================ tokens.css — Adviesraad design-token layer (Conexxus / zakelijk) ---------------------------------------------------------------------------- The FIRST :root token block in the app. Loaded BEFORE app.css so every sheet that follows (app.css overview-* migration, dashboard.css, presenteer.css, MainLayout.razor.css) can consume var(--…) instead of hard-coded hex. ADVIESWIJZER DESIGN SYSTEM (2026-08 redesign). The palette below implements the "rustig, monochroom-navy, veel wit, dunne lijnen"-thema from `Advieswijzer-Design-System.md`. The token NAMES are unchanged and brand- neutral, so every existing consumer (app.css, dashboard.css, MainLayout, Bootstrap bridge) re-skins to the new palette without a selector rewrite; only the token VALUES moved. Character: colour is rare and meaningful — emphasis comes from --ink on white, not from a saturated brand hue. The one soft carrier is --brand-tint (#DBEAFE) behind counts/badges/icon-tiles. The Personal.Advisory.Client twin overrides token *values* in its own tokens.css and copies dashboard.css / presenteer.css verbatim. THEME SEAM: the light palette is the :root default AND is declared under an explicit [data-theme="light"] scope (same selector list, so they cannot drift). Dark mode is out of redesign scope; a future :root[data-theme="dark"]{…} block is a pure-additive sibling. ============================================================================ */ :root, :root[data-theme="light"] { /* --- type families (Advieswijzer: Sora display / Inter UI / IBM Plex Mono numbers) --- */ --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif; /* h1/card titles/KPI cijfers/logo */ --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* all UI + body text */ --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace; /* datums/tellingen/bedragen */ /* --- brand / primary action (navy is the dominant colour AND the action colour) --- */ --brand-primary: #16283F; /* headings, links, primary buttons, active nav, logo */ --brand-primary-hover: #0f1d30; /* primary hover (darker navy) */ --brand-tint: #DBEAFE; /* accent-soft: count badges, "nieuw" chips, icon tiles, filled bar */ /* --- ink / text (four levels of decreasing emphasis; use weight/size before a 5th gray) --- */ --ink: #16283F; /* primary text, list-item titles, KPI cijfers */ --ink-body: #1D2B3A; /* long reading blocks (AI-samenvatting) — softer than --ink */ --ink-2: #56637A; /* text-secondary: card/body text, caps section heads */ --ink-3: #56637A; /* tertiary body text (trajectory position preview) */ --muted: #8DA3B8; /* text-muted: metadata, datums, hulpteksten, tellingen */ --muted-2: #8DA3B8; /* text-muted (unified — overview supporting text) */ --text-faint: #CBD8E3; /* empty values, placeholders, disabled text */ --nav-body: #3C4F63; /* inactive navigation items */ /* --- surfaces --- */ --surface: #fff; /* page canvas, cards, inner tiles */ --surface-alt: #fff; /* panel background — cards are white + 1px border, no fill */ --surface-subtle: #F5F8FA; /* surface-sunken: AI-samenvatting panel, table heads, neutral chips */ --surface-muted: #EEF2F6; /* track: progress bars, filled tracks, toggle track */ --surface-tint: #F3F6FA; /* surface-chrome: topbar / info blocks */ --surface-chrome: #F3F6FA; /* application chrome (topbar) */ /* --- borders (thin lines carry all structure; no shadows on cards) --- */ --border: #E2E8F0; /* standard card / button / input border */ --border-2: #E2E8F0; /* card ramp (unified to --border) */ --border-3: #DCE4EC; /* dashed track / muted accent border */ --hairline: #EDF1F5; /* border-soft: row separation inside cards & lists */ --border-chrome: #DFE7EE; /* single line under the topbar */ --track: #EEF2F6; /* progress-bar / filled-track background */ --track-dashed: #DCE4EC; /* dashed track (traject loopt door zonder einddatum) */ /* --- valence / status (semantic only; never decorative) --- */ --ok: #198754; /* Bootstrap success (form validity) */ --ok-2: #2e7d4f; /* rekentool recorded green */ --danger: #dc3545; /* Bootstrap danger (real errors) */ --danger-2: #C0392B; /* error red */ --lethal: #7a0010; /* lethal valence */ --warn: #ffc107; /* Bootstrap warning */ --urgent: #C0392B; /* urgent — hottest severity, ranks ABOVE --alert (hoog) */ --urgent-bg: #FBEAE7; /* urgent soft tint (chip background) */ --alert: #B5551F; /* hoog / risico accent (3px stripe, signalen, high priority) */ --alert-bg: #F5E7DB; /* hoog soft tint (chip background) */ --prio-mid: #D3A147; /* middel / let op accent */ --prio-mid-bg: #FAF0D8; /* middel soft tint (chip background) */ --stale: #A2761F; /* middel / stale text (darker amber, readable on tint) */ --stale-bg: #fef3c7; /* stale badge background */ --counterfactual: #16283F; /* "Nu handelen" accent — monochrome navy (was purple) */ /* --- radius / space / shadow (Advieswijzer radius scale) --- */ --radius: 10px; /* general (nav-items, small cards, tabel blocks) */ --radius-sm: 8px; /* buttons, inputs, nav-items */ --radius-card: 16px; /* standard card */ --radius-panel: 18px; /* sunken summary panel */ --radius-pill: 20px; /* chips, badges, pills */ --space-1: .25rem; --space-2: .5rem; --space-3: 1rem; --space-4: 1.25rem; --shadow-card: none; /* cards carry no shadow (design rule) */ --shadow-pop: 0 12px 28px rgba(22, 40, 63, .14); /* dropdowns / popovers only */ /* --- Bootstrap bridge — re-point BS 5 runtime vars at the brand tokens --- */ --bs-primary: var(--brand-primary); --bs-primary-rgb: 22, 40, 63; --bs-secondary: var(--ink-2); --bs-link-color: var(--brand-primary); --bs-link-color-rgb: 22, 40, 63; --bs-link-hover-color: var(--brand-primary-hover); --bs-border-color: var(--border); --bs-body-color: var(--ink); --bs-body-color-rgb: 22, 40, 63; --bs-body-font-family: var(--font-ui); --bs-border-radius: var(--radius-sm); --bs-border-radius-sm: var(--radius-sm); --bs-secondary-color: var(--muted); /* --- component alias tokens --------------------------------------------- Several component sheets (SignalenView, BronDetailView, …) reference var(--name, fallback) tokens that were never defined, so they silently rendered the OLD-palette fallbacks. Defining them here (mapped onto the Advieswijzer palette) re-skins those components centrally — no per-sheet edit — and the inline fallbacks become dead code. ------------------------------------------------------------------------ */ --text-muted: var(--muted); --border-subtle: var(--border); --surface-1: var(--surface); --surface-2: var(--surface-muted); --surface-accent: rgba(22, 40, 63, 0.06); --warning-fg: var(--stale); --warning-bg: var(--stale-bg); --success-fg: var(--ok-2); --success-bg: #E6F4EA; --radius-2: var(--radius); } /* ============================================================================ ADVIESWIJZER PALETTE REFERENCE (design-system §1): #16283F --ink / --brand-primary #1D2B3A --ink-body #56637A --ink-2 (text-secondary) #8DA3B8 --muted (text-muted) #CBD8E3 --text-faint #3C4F63 --nav-body #FFFFFF --surface #F5F8FA --surface-subtle (sunken) #F3F6FA --surface-chrome #EEF2F6 --track #E2E8F0 --border #EDF1F5 --hairline (border-soft) #DFE7EE --border-chrome #DCE4EC --track-dashed #DBEAFE --brand-tint (accent-soft) #B5551F --alert (hoog/risico) #D3A147 --prio-mid (middel) A future dark theme is a pure-additive sibling — author when dark lands: :root[data-theme="dark"] { --surface:#12202f; --ink:#eaf1f8; … } ============================================================================ */