/* ============================================================================ tokens.css — Mijn Advieswijzer design-token layer (Personal / consument) ---------------------------------------------------------------------------- The FIRST :root token block in the app. Loaded BEFORE app.css so every sheet that follows (dashboard.css, pages.css, presenteer.css, the new Signalen/ Besluiten surfaces, MainLayout.razor.css) can consume var(--…) instead of hard-coded hex. MIJN ADVIESWIJZER = the consumer twin of De Adviesraad (zakelijk). Same merk- icoon, vormtaal en typografie (Sora / Inter / IBM Plex Mono, radius-schaal, 1px randen zonder schaduw, vier tekstniveaus, de semantische prioriteits- kleuren) — ALLEEN de kleurstelling verschilt. This twin implements colour direction **A — Mosgroen** from `Kleurstelling Mijn Advieswijzer.pdf` (2026-08): één diepgroene inkt (#143528) draagt alles, één zacht mint-accent (#D8EFE0) markeert, semantiek blijft voorbehouden aan status. The token NAMES are identical to the Conexxus twin's tokens.css, so every consumer re-skins to mosgroen without a selector rewrite — only the token VALUES moved from navy to green. The status/valence block is IDENTICAL to Conexxus by design (semantiek = status, kleur mag daar niet driften). NB: Personal's legacy app.css still hard-codes the old ID2Bytes navy (#164373) and defines NO custom properties, so this sheet is purely additive — it introduces the mosgroen tokens the NEW surfaces consume without touching the existing screens. The whole-product #164373→mosgroen sweep of app.css is a separate (deferred) re-skin pass. 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 (mosgroen is the dominant colour AND the action colour) --- */ --brand-primary: #143528; /* headings, links, primary buttons, active nav, logo */ --brand-primary-hover: #0d2119; /* primary hover (darker mosgroen) */ --brand-tint: #D8EFE0; /* accent-soft (mint): count badges, "nieuw" chips, icon tiles, filled bar */ /* --- ink / text (four levels of decreasing emphasis; use weight/size before a 5th gray) --- */ --ink: #143528; /* primary text, list-item titles, KPI cijfers */ --ink-body: #1C3A2C; /* long reading blocks (AI-samenvatting) — softer than --ink */ --ink-2: #4E6157; /* text-secondary: card/body text, caps section heads (mosgroen mid) */ --ink-3: #4E6157; /* tertiary body text (trajectory position preview) */ --muted: #7C9488; /* text-muted: metadata, datums, hulpteksten, tellingen */ --muted-2: #7C9488; /* text-muted (unified — overview supporting text) */ --text-faint: #C6D8CC; /* empty values, placeholders, disabled text (licht mosgroen) */ --nav-body: #3D5449; /* 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: #F4F8F5; /* surface-sunken: AI-samenvatting panel, table heads, neutral chips */ --surface-muted: #E9F1EC; /* track: progress bars, filled tracks, toggle track */ --surface-tint: #F1F6F2; /* surface-chrome: topbar / info blocks */ --surface-chrome: #F1F6F2; /* application chrome (topbar) */ /* --- borders (thin lines carry all structure; no shadows on cards) --- */ --border: #DCE7DF; /* standard card / button / input border */ --border-2: #DCE7DF; /* card ramp (unified to --border) */ --border-3: #CFE0D5; /* dashed track / muted accent border */ --hairline: #E8F0EA; /* border-soft: row separation inside cards & lists */ --border-chrome: #D6E4DA; /* single line under the topbar */ --track: #E9F1EC; /* progress-bar / filled-track background */ --track-dashed: #CFE0D5; /* dashed track (traject loopt door zonder einddatum) */ /* --- valence / status (semantic only; never decorative — IDENTICAL to the Conexxus twin) --- */ --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: #143528; /* "Nu handelen" accent — monochrome mosgroen (matches brand) */ /* --- radius / space / shadow (Advieswijzer radius scale — identical across twins) --- */ --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(20, 53, 40, .14); /* dropdowns / popovers only (mosgroen ink) */ /* --- Bootstrap bridge — re-point BS 5 runtime vars at the brand tokens --- */ --bs-primary: var(--brand-primary); --bs-primary-rgb: 20, 53, 40; --bs-secondary: var(--ink-2); --bs-link-color: var(--brand-primary); --bs-link-color-rgb: 20, 53, 40; --bs-link-hover-color: var(--brand-primary-hover); --bs-border-color: var(--border); --bs-body-color: var(--ink); --bs-body-color-rgb: 20, 53, 40; --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 Mosgroen 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(20, 53, 40, 0.06); --warning-fg: var(--stale); --warning-bg: var(--stale-bg); --success-fg: var(--ok-2); --success-bg: #E6F4EA; --radius-2: var(--radius); } /* ============================================================================ MIJN ADVIESWIJZER — MOSGROEN PALETTE REFERENCE (direction A): #143528 --ink / --brand-primary #1C3A2C --ink-body #4E6157 --ink-2 (text-secondary) #7C9488 --muted (text-muted) #C6D8CC --text-faint #3D5449 --nav-body #FFFFFF --surface #F4F8F5 --surface-subtle (sunken) #F1F6F2 --surface-chrome #E9F1EC --track #DCE7DF --border #E8F0EA --hairline (border-soft) #D6E4DA --border-chrome #CFE0D5 --track-dashed #D8EFE0 --brand-tint (mint accent) #B5551F --alert (hoog/risico) #D3A147 --prio-mid (middel) Semantiek (--ok/--danger/--urgent/--alert/--prio-mid/--stale) is IDENTICAL to De Adviesraad — status colours never re-skin. A future dark theme is a pure-additive sibling — author when dark lands: :root[data-theme="dark"] { --surface:#0e1f18; --ink:#e6f2ea; … } ============================================================================ */