/* ============================================================================ LS Suite — design tokens ---------------------------------------------------------------------------- Eén bron voor het uiterlijk van alle modules: Platform, Grid, Scope, DocGen, MAT en Voice. Wie een kleur, maat of lettergrootte nodig heeft, pakt hem hier. REGELS 1. Nieuwe CSS gebruikt var(--lss-*). Schrijf geen losse hexwaarde meer. 2. Verandert de huisstijl, dan verandert dit bestand — verder niets. 3. Betekeniskleuren (goed/waarschuwing/fout/indicatief) zijn GEEN huisstijl. Ze dragen informatie en veranderen niet mee met het accent van een tenant. 4. Modules mogen --lss-accent per tenant overschrijven (white-label). Alles wat daarvan afgeleid is, volgt dan vanzelf. Laad dit bestand VÓÓR de eigen stylesheet van de module. ========================================================================== */ :root { /* --- Letter --------------------------------------------------------------- Inter staat vooraan maar wordt nergens als webfont geladen; in de praktijk rendert alles op het systeemfont. Dat is bewust: geen externe fontbron, geen flits bij laden, en op elk platform de best leesbare UI-letter. Zetten we Inter later wel als bestand in, dan hoeft alleen dit blok mee. */ --lss-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --lss-font-mono: ui-monospace, SFMono-Regular, Menlo, "Courier New", monospace; /* --- De particuliere letters (2 nov 2026) ---------------------------------- 🔑 ZELF GEHOST, GEEN GOOGLE FONTS. De regel hierboven zegt «geen externe fontbron»; die blijft gelden. De drie .woff2-bestanden staan in public/assets/fonts/ en worden geladen met @font-face onderaan dit bestand. ⚠️ ALLEEN VOOR DE PARTICULIERE MODUS. Enterprise houdt --lss-font; die schermen zijn werkomgevingen waar de systeemletter beter leest. De schil zet alleen in particuliere modus [data-modus="particulier"], en dáár verwijzen de modules naar --lss-font-kop / --lss-font-tekst. GEMETEN: 469 kB samen (Newsreader 203 + cursief 226 + Public Sans 40). Dat lijkt veel maar staat in verhouding: de etalage lsvoice.nl is 1,08 MB HTML en een Voice-pagina laadt nu al 134 kB CSS. woff2 is al gecomprimeerd, dus gzip levert niets extra (gemeten: 1-2 kB verschil). Eenmalig per bezoeker, daarna uit de cache. ⚠️ De cursief MOET een eigen bestand zijn. Hij komt alleen in koppen voor («een schil die *klinkt*»), en laat je de browser hem synthetiseren dan ziet een kop er anders uit dan op de etalage — precies de plek waar het opvalt. Via Google laden was de andere optie, maar dan doet elke paginaweergave alsnog een verzoek naar buiten. */ --lss-font-kop: "Newsreader", "Iowan Old Style", Georgia, serif; --lss-font-tekst: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --lss-fs-xs: 11px; /* eyebrow, legenda */ --lss-fs-sm: 12px; /* tabelkop, badge */ --lss-fs-base: 13px; /* tabelcel, formulier */ --lss-fs-md: 14px; /* lopende tekst, knop */ --lss-fs-lg: 16px; /* paneelkop */ --lss-fs-xl: 20px; /* paginakop */ --lss-fs-2xl: 28px; /* kengetal */ --lss-lh-krap: 1.25; --lss-lh-basis: 1.55; --lss-lh-ruim: 1.8; --lss-tracking-kop: -.02em; /* koppen mogen strakker */ --lss-tracking-label: .09em; /* uppercase labels ademen */ /* --- Kleur: grond en inkt ------------------------------------------------- Het grijs helt licht naar het accent; een neutraal grijs oogt onbedoeld. */ --lss-bg: #ffffff; /* de pagina */ --lss-bg-soft: #f5f6f8; /* rustvlak achter panelen */ --lss-surface: #ffffff; /* paneel, kaart, tabel */ --lss-surface-alt: #fafbfc; /* tabelkop, ingesprongen rij */ --lss-border: #e3e5ea; /* zichtbare scheiding */ --lss-border-soft: #eff0f3; /* nauwelijks zichtbaar */ --lss-border-mid: #c9ced8; /* invoerveld, actieve rand */ --lss-text: #1a1f2e; /* lopende tekst */ --lss-muted: #5a6070; /* bijschrift, tweede regel */ --lss-faint: #9198a8; /* label, lege waarde */ /* --- Kleur: accent -------------------------------------------------------- Eén blauw. Per tenant te overschrijven; de rest volgt. */ --lss-accent: #3b6cb3; --lss-accent-hover: #2f5a9a; --lss-accent-light: #eef2fb; /* wash achter accent-tekst */ /* --- Kleur: betekenis ----------------------------------------------------- Deze vier zeggen iets over de INHOUD, niet over de merkstijl. Ze blijven staan als een tenant een eigen accent kiest — anders leest een gebruiker "goed" als "merkkleur". */ --lss-ok: #1a5c2a; --lss-ok-bg: #f0f7f2; --lss-warn: #8a5a1f; --lss-warn-bg: #fdf1dc; /* Aparte tint voor rand-accenten (3px-balken, linkerranden van kaarten). --lss-warn is gedempt oker: als tekst leest dat rustig, maar als balk oogt het bruinig — niet als "let op" maar als vuil. Een rand heeft meer verzadiging nodig dan letters. Gebruik --lss-warn voor tekst, --lss-warn-rand voor randen. */ --lss-warn-rand: #c8791a; --lss-crit: #8c2f2f; --lss-crit-bg: #fdf0f0; --lss-indicatief: #1668a8; --lss-indicatief-bg: #e4f0fa; /* --- Maatvoering ---------------------------------------------------------- Eén schaal, geen tussenmaten. Ruimte komt uit gap, niet uit margin. */ --lss-sp-1: 4px; --lss-sp-2: 8px; --lss-sp-3: 12px; --lss-sp-4: 16px; --lss-sp-5: 24px; --lss-sp-6: 32px; --lss-sp-7: 48px; --lss-r-sm: 4px; /* badge, invoerveld */ --lss-r-md: 6px; /* knop, paneel */ --lss-r-lg: 14px; /* kaart op de etalage */ --lss-rij: 34px; /* hoogte van een tabelrij — dicht genoeg om te scannen */ /* --- Diepte --------------------------------------------------------------- Spaarzaam. Een paneel ligt op de pagina, niet erboven te zweven. */ --lss-schaduw: 0 1px 2px rgba(26,31,46,.05), 0 1px 3px rgba(26,31,46,.04); --lss-schaduw-menu: 0 4px 16px rgba(26,31,46,.12); --lss-schaduw-modal: 0 8px 32px rgba(26,31,46,.18); --lss-focus: 0 0 0 3px rgba(59,108,179,.28); /* toetsenbordfocus, altijd zichtbaar */ --lss-overgang: .15s ease; } /* --------------------------------------------------------------------------- Donkere weergave Drie standen: expliciet donker, expliciet licht, en "systeem" (niets gezet). Daarom zowel de mediaquery als de stempel, allebei via dezelfde tokens. Nog niet uitgerold in de modules; het blok staat er zodat de eerste module die het aanzet niet zelf een palet hoeft te verzinnen. ------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lss-bg: #14171f; --lss-bg-soft: #1a1e27; --lss-surface: #1c2029; --lss-surface-alt: #22262f; --lss-border: #2c313c; --lss-border-soft: #24282f; --lss-border-mid: #3d4350; --lss-text: #e8eaef; --lss-muted: #a3a9b8; --lss-faint: #737a8a; --lss-accent: #6d9bdd; --lss-accent-hover: #85addf; --lss-accent-light: #1e2937; --lss-ok: #6fc98a; --lss-ok-bg: #16281c; --lss-warn: #e0aa5e; --lss-warn-bg: #2b2113; --lss-warn-rand: #d9913c; --lss-crit: #e08585; --lss-crit-bg: #2b1717; --lss-indicatief: #6fb4e8; --lss-indicatief-bg: #142433; --lss-schaduw: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25); --lss-schaduw-menu: 0 4px 16px rgba(0,0,0,.45); --lss-schaduw-modal: 0 8px 32px rgba(0,0,0,.55); --lss-focus: 0 0 0 3px rgba(109,155,221,.35); } } :root[data-theme="dark"] { --lss-bg: #14171f; --lss-bg-soft: #1a1e27; --lss-surface: #1c2029; --lss-surface-alt: #22262f; --lss-border: #2c313c; --lss-border-soft: #24282f; --lss-border-mid: #3d4350; --lss-text: #e8eaef; --lss-muted: #a3a9b8; --lss-faint: #737a8a; --lss-accent: #6d9bdd; --lss-accent-hover: #85addf; --lss-accent-light: #1e2937; --lss-ok: #6fc98a; --lss-ok-bg: #16281c; --lss-warn: #e0aa5e; --lss-warn-bg: #2b2113; --lss-warn-rand: #d9913c; --lss-crit: #e08585; --lss-crit-bg: #2b1717; --lss-indicatief: #6fb4e8; --lss-indicatief-bg: #142433; --lss-schaduw: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25); --lss-schaduw-menu: 0 4px 16px rgba(0,0,0,.45); --lss-schaduw-modal: 0 8px 32px rgba(0,0,0,.55); --lss-focus: 0 0 0 3px rgba(109,155,221,.35); } /* --------------------------------------------------------------------------- Particuliere weergave Jeroen, 2 november 2026: *"En de stijl dan voor particulier echt in de richting van de etalage van lsvoice.nl inzetten"*. Een particulier komt binnen via lsvoice.nl. Belandt hij daarna in een ander jasje, dan ziet hij twee producten. Deze set trekt het scherm naar de etalage. 🔑 WAAROM HIER EN NIET IN DE MODULE. Punt 4 van docs/HUISSTIJL_TOKENS.md: "Modules zetten geen eigen :root-tokens meer. Deden ze dat wel, dan laadden ze ná tokens.css en wonnen hun eigen waarde." Een [data-modus]-blok in Voice' eigen CSS zou precies die regel breken. Daarom in de bron, met een cp naar de kopieën. ⚠️ WAT HIER BEWUST NIET IN STAAT: --lss-ok / warn / crit / indicatief. Punt 3 van datzelfde document: betekeniskleuren dragen informatie en veranderen niet mee met een huisstijl, anders leest iemand "goed" als merkkleur. Ook --lss-accent en --lss-accent-light blijven: die zijn al exact de etalagewaarden (#3b6cb3 / #eef2fb). Gemeten, niet aangenomen. Het verschil met de zakelijke weergave is daarmee klein en gericht: een warm crème vlak in plaats van koel wit-op-grijs, en rondere hoeken. ------------------------------------------------------------------------- */ :root[data-modus="particulier"] { /* 🔴 CRÈME IS EEN AANDUIDING, GEEN VLAKKLEUR — gecorrigeerd 4 nov 2026. * * Hier stond `--lss-surface: #fdf6e8` met als uitleg «de etalage is wit met crème * vlakken». Dat was fout, en Jeroen zag het meteen: *"hadden we echt een cremekleurige * menubalk etc? Ik kan mij die creme-kleur niet herinneren als een gekozen kleur"*. * * GEMETEN in lsvoice-site/public/index.html: `var(--plek)` (#fdf6e8) komt daar ÉÉN keer * voor, op `.meta-balk`. Eén balk. Nergens anders. * * `--lss-surface` beschrijft «paneel, kaart, tabel» — 15 plekken in Voice. Door daar * crème op te zetten werd ELK vlak crème: de kopbalk, de zoekvelden, de opnamekaarten, * de lege staat. Precies wat Jeroen op 2 nov al aanwees: *"Ik had eerst de verwachting * dat de crèmekleurige blokken slechts waren om het particuliere van enterprise te * kunnen scheiden."* Ik schreef toen in het voorstel dat crème een AANDUIDING is, en * bouwde vervolgens het tegenovergestelde. * * Nu: wit op wit, zoals de etalage. Crème krijgt een eigen token en wordt bewust * geplaatst waar het iets betekent. */ --lss-bg-soft: #ffffff; --lss-surface: #ffffff; --lss-border: #e3e5ea; /* De aanduidingskleur van de etalage (daar `--plek`). Gebruik hem SPAARZAAM: één balk * of één markering, niet als achtergrond van panelen. */ --lss-plek: #fdf6e8; --lss-plek-rand: #d8c08a; --lss-plek-inkt: #8a6a1f; /* Iets donkerder en koeler dan de zakelijke inkt — zoals op de etalage. */ --lss-text: #15181f; --lss-muted: #555b67; --lss-faint: #878d99; /* De etalage gebruikt 10px en 18px waar het scherm 6px en 4px heeft. */ --lss-r-md: 10px; --lss-r-sm: 7px; /* Op een crème vlak valt een grijze schaduw vuil uit; warmer en zachter. */ --lss-schaduw: 0 1px 2px rgba(21,24,31,.04), 0 2px 6px rgba(21,24,31,.04); /* 🔑 HIER wisselt de letter, en alleen hier. --lss-font blijft bestaan voor wie hem rechtstreeks gebruikt; wat verandert is waar de modules naar wijzen. Enterprise raakt dit blok niet aan en houdt dus de systeemletter. */ --lss-font: var(--lss-font-tekst); } /* ⚠️ OOK EEN DONKERE VARIANT, anders valt een particulier in donkere modus terug op de zakelijke waarden en krijgt hij een halve huisstijl. De toets in tests/toets_tokens.py eist een donkere tegenhanger alleen voor het eerste :root-blok; dit blok valt daarbuiten. Dat is precies waarom het hier met de hand moet — en waarom de toets is uitgebreid zodat hij het voortaan bewaakt. */ @media (prefers-color-scheme: dark) { :root[data-modus="particulier"]:not([data-theme="light"]) { /* Crème werkt niet in het donker: daar wordt het vuilgeel. Een warme donkere tint houdt wél het verschil met de koele zakelijke weergave vast. */ --lss-bg-soft: #16151a; --lss-surface: #201e24; --lss-border: #322f38; --lss-text: #f0ece6; --lss-muted: #b3aca3; --lss-faint: #85807a; --lss-schaduw: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.22); /* De aanduidingskleur, donker: crème wordt vuilgeel op zwart. */ --lss-plek: #241f16; --lss-plek-rand: #4a3d22; --lss-plek-inkt: #d8bf8a; } } :root[data-modus="particulier"][data-theme="dark"] { --lss-bg-soft: #16151a; --lss-surface: #201e24; --lss-border: #322f38; --lss-text: #f0ece6; --lss-muted: #b3aca3; --lss-faint: #85807a; --lss-schaduw: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.22); /* De aanduidingskleur, donker. */ --lss-plek: #241f16; --lss-plek-rand: #4a3d22; --lss-plek-inkt: #d8bf8a; } /* --------------------------------------------------------------------------- Overgangslaag De modules gebruiken vandaag eigen namen. Die wijzen we hier naar de tokens toe, zodat het uiterlijk in één keer gelijkgetrokken is zonder dat er in de modules iets hoeft te veranderen. Per module opruimen mag daarna rustig; zolang een regel hier staat, blijft de oude naam werken. ------------------------------------------------------------------------- */ :root { /* Platform (public/assets/css/app.css) */ --accent: var(--lss-accent); --accent-hover: var(--lss-accent-hover); --accent-light: var(--lss-accent-light); --bg: var(--lss-bg); --bg-soft: var(--lss-bg-soft); --panel: var(--lss-surface); --border: var(--lss-border); --border-soft: var(--lss-border-soft); --text: var(--lss-text); --text-sec: var(--lss-muted); --text-faint: var(--lss-faint); --shadow-card: var(--lss-schaduw); --shadow-hover: var(--lss-schaduw-menu); /* Deze vier stonden in app.css alleen als fallback binnen var(...) en waren nergens gedefinieerd; de fallbackwaarden kwamen van buiten het palet. */ --warn: var(--lss-warn); --warn-text: var(--lss-warn); --warn-bg: var(--lss-warn-bg); --warn-border: var(--lss-border); --danger: var(--lss-crit); --danger-light: var(--lss-crit-bg); --vlak: var(--lss-surface-alt); /* Grid (assets/app.css) Grid gebruikte --bg voor het rustvlak achter de kaarten, terwijl het platform daarmee "de pagina is wit" bedoelt. Eén naam, twee betekenissen — daarom verwijst Grid nu rechtstreeks naar --lss-bg-soft. */ --surface: var(--lss-surface); --border-mid: var(--lss-border-mid); --text-mid: var(--lss-muted); --text-dim: var(--lss-faint); --pos: var(--lss-ok); --pos-bg: var(--lss-ok-bg); --neg: var(--lss-crit); --neg-bg: var(--lss-crit-bg); --radius: var(--lss-r-sm); --mono: var(--lss-font-mono); --sans: var(--lss-font); /* Grid matrix (assets/matrix2.css) */ --m2-accent: var(--lss-accent); --m2-accent-zacht: var(--lss-accent-light); --m2-accent-hover: var(--lss-accent-hover); --m2-goed: var(--lss-ok); --m2-goed-bg: var(--lss-ok-bg); --m2-slecht: var(--lss-crit); --m2-slecht-bg: var(--lss-crit-bg); --m2-waarschuw: var(--lss-warn); --m2-waarschuw-bg: var(--lss-warn-bg); --m2-indicatief: var(--lss-indicatief); --m2-indicatief-bg: var(--lss-indicatief-bg); --m2-schaduw: var(--lss-schaduw); --m2-schaduw-groot: var(--lss-schaduw-modal); --waarschuw: var(--lss-warn); --indicatief: var(--lss-indicatief); --m2-waarsch: var(--lss-warn); /* schrijffout in matrix2.css:956 */ /* Website / etalage (lssuite.css) */ --lss-accent-light-compat: var(--lss-accent-light); --lss-border-light: var(--lss-border-soft); } /* --------------------------------------------------------------------------- Bewaking tests/toets_tokens.py — modules zetten geen eigen tokens, geen zwevende var(), geen kleurfallbacks, elke lichte kleur heeft een donkere tegenhanger, betekeniskleuren ≠ accent ../ls-grid/tests/toets_tokens.php — de kopie in Grid is gelijk aan dit bestand Beide toetsen zijn gecontroleerd door ze te saboteren: een weggehaald token, een betekeniskleur gelijk aan het accent, een ontbrekende donkere waarde, een herstelde fallback en een gewijzigde kopie werden allemaal gepakt. ------------------------------------------------------------------------- */ /* ══════════════════════════════════════════════════════════════════════════════ DE FONTBESTANDEN font-display: swap — de tekst is meteen leesbaar in de terugvalletter en wisselt zodra het font er is. Zonder dit blijft tekst onzichtbaar tot het font geladen is, en dat is bij een opnamelijst precies het verkeerde moment. Newsreader is VARIABEL op opsz (optical size) en gewicht: één bestand dekt 200-500 en 6-72pt. ⚠️ De opsz moet mee in de opmaak — een kop van 80px met de instelling van een broodletter krijgt veel te dikke schreven. ══════════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 500; font-display: swap; src: url("/assets/fonts/newsreader.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 500; font-display: swap; src: url("/assets/fonts/newsreader-italic.woff2") format("woff2"); } @font-face { font-family: "Public Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("/assets/fonts/publicsans.woff2") format("woff2"); }