@import url("/fonts/tt-norms.css");

/* ============================================================================
   De huisstijl van dit OS. Drie lagen, en ze horen in deze volgorde te blijven.

   Tot 27 augustus 2026 stond hier de volledige tokenset van één klant: zijn
   kleuren, zijn huisletter, zijn namen. De template werd wel geneutraliseerd op
   klantnaam, maar niet op klantinhoud, dus elke nieuwe klant erfde het merk van
   een ander bedrijf. Dat is nu omgedraaid.

   LAAG 1  de klant. Vier regels. Dit is het enige dat per klant verschilt,
           naast assets/merk-logo.svg. De uitrol vult ze uit de onboarding.
   LAAG 2  het systeem. Neutrale grijzen, maten, vormen, beweging. Gelijk voor
           iedereen.
   LAAG 3  de oppervlakken. Wat een component gebruikt. Een component kiest
           nooit rechtstreeks uit laag 1 of 2, want dan moet hij weten of hij in
           de lichte of de donkere stand staat, en dan ontstaat er per component
           een tweede palet. Zo kwam os/cockpit.css op 124 unieke kleuren uit.
   ========================================================================= */

/* --- LAAG 1: de klant ---------------------------------------------------
   Deze kleuren bepalen elke balk: de kop van het hoofdscherm, de koppen van de
   andere bladzijden en de zijbalken. Het logo staat er wit op, dus
   assets/merk-logo.svg hoort een wit logo te zijn.

   De waarden hieronder zijn de standaard, niet de vaste waarde. Een klant
   zonder gekozen kleur ziet iets dat klopt; een klant met een kleur ziet
   zichzelf, vanaf het eerste scherm. */
:root{
  --merk-balk:#0A1628;
  --merk-balk-diep:#070C1A;
  --merk-kleur:#059669;
  --merk-contrast:#F8FAFC;
}

/* --- DE VIER ACCENTEN VAN socialnow.nl ----------------------------------
   STIJL.md, 11 september 2026 (Marinus): "Er is een nieuwe stijl en dat is die van
   www.socialnow.nl." Vier accenten, en niet meer. Elke app draagt er één en houdt die
   overal vast: de streep boven de kaart, het icoon, de knop.

   Ze staan hier en niet in os/cockpit.css, want daar zijn ze geen kleur maar een merk. Een
   component die er zelf een hex neerzet, zet hem ooit net iets anders neer, en dan zijn het
   er acht. os/cockpit.css staat bovendien op zijn plafond van 124 unieke kleuren (b74).

   De zwarte grond hoort erbij: #000 met vlakken op #0A0A0A en #141414. Als rgb, zodat een
   component er een doorzichtigheid bij kan kiezen zonder een tweede getal te verzinnen. */
:root{
  --sn-groen:#25D366;          /* Website, goed nieuws, bevestigen */
  --sn-blauw:#00A3E0;          /* CRM, cijfers, links */
  --sn-geel:#F7E644;           /* Studio, aandacht, iets wat wacht */
  --sn-roze:#F62961;           /* Advertenties, nadruk, iets wat op scherp staat */
  /* Dezelfde vier, als losse kanaalwaarden. Nodig zodra een kleur doorzichtig moet zijn:
     rgb(var(--sn-roze-rgb) / .18). Geel en groen stonden er al; roze en blauw ontbraken en de
     Hermes-tak liep daar tegenaan (11 september 2026). Vier kleuren, dus vier regels. */
  --sn-geel-rgb:247 230 68;
  --sn-groen-rgb:37 211 102;
  --sn-blauw-rgb:0 163 224;
  --sn-roze-rgb:246 41 97;
  --sn-grond-rgb:10 10 10;     /* het vlak op de zwarte grond */

  /* Waar een accent áchter tekst komt te staan, wint het contrast.
     Marinus, 10 september 2026: "MAAK EEN STRENGE REGEL OVERAL DAT HET CONTRAST MET LETTERS
     EN ACHTERGRONDEN ALTIJD GOED MOET ZIJN." Wit op #25D366 haalt 1,8 op 1 en wit op #F7E644
     haalt 1,1 op 1; allebei zakken ze door a20 heen. socialnow.nl vult geel dan ook nooit,
     en zet op groen alleen grote vette kapitalen.
     Daarom: de accenten hierboven zijn voor tekst, randen en gloed; dit is de enige groene
     vulling waar wit op mag staan, en die haalt 5,1 op 1. */
  --sn-groen-vlak:#0B7A37;

  /* De zwarte grond van socialnow.nl, als token voor de ene chat (16 september 2026).
     STIJL.md: grond #000, vlakken #0A0A0A en #141414, randen wit op tien procent, gedempte
     tekst minstens .62. De rode telling draagt wit (4,8 op 1). */
  --sn-zwart:#000000;
  --sn-vlak:#0A0A0A;
  --sn-vlak-hoog:#141414;
  --sn-wit:#FFFFFF;
  --sn-tekst-gedempt:rgb(255 255 255 / .66);
  --sn-tekst-vaag:rgb(255 255 255 / .5);
  --sn-rand:rgb(255 255 255 / .1);
  --sn-rand-sterk:rgb(255 255 255 / .18);
  --sn-glas:rgb(255 255 255 / .04);
  --sn-glas-hoog:rgb(255 255 255 / .08);
  --sn-telling:#DC2626;
  --sn-schaduw:0 18px 50px rgb(0 0 0 / .55);
  --sn-achtergrond-dicht:rgb(0 0 0 / .7);
  --sn-groen-glans:linear-gradient(180deg, #0B7A37 0%, #08632B 100%);
}

/* --- HET ONTWERP VAN 16 SEPTEMBER 2026 ------------------------------------
   Besluit van Marinus, 16 september 2026: "een compleet nieuwe design UI en UX" voor het hele
   OS, vanuit concept 14 (docs/concepten-een-chat/14.png) en de stijl van socialnow.nl. Deze
   groep is de enige plek met de kleuren van dat ontwerp; os/ontwerp.css gebruikt alleen deze
   namen en zet zelf geen enkele hexcode neer (tests/b200 bewaakt dat).

   Zwarte grond, panelen DONKERDER dan de grond, dunne randen. De vier accenten zijn streep,
   cijfer, icoon, rand of gloed en nooit een vlak met witte tekst. De hoofdactie is groen en
   glanst, met witte tekst: het glansverloop loopt van 5,05 naar 6,65 op 1 tegen wit, dus de
   lichtste plek haalt 4,5 nog. Nagerekend in STIJL.md, "Metingen van 16 september".

   Gedempte tekst staat op .62 (7,8 op 1 op de grond) en niet lager. */
:root{
  /* 16 september 2026, 21:40 (Marinus): "ik mis de zwart met blauwe UI/UX", secties "iets
     lichter donkerblauw zoals ook op de website, met minimale kleurdetails". De grond blijft
     zwart; kaarten en secties zijn het donkerblauw-naar-zwart van socialnow.nl (bca4b58 in
     socialnow-nl-LIVE) en dus iets LICHTER dan de grond. */
  --ui-grond:#03060B;          /* de pagina: zwart met een zweem blauw */
  --ui-paneel:#0A1729;         /* kaart, sectie, kolom: donkerblauw */
  --ui-verhoogd:#12233A;       /* invoer, chip, iets waar je op drukt */
  --ui-grond-rgb:3 6 11;
  --ui-paneel-rgb:10 23 41;
  --ui-zwart:#050505;
  /* Het verloop van de kaarten op socialnow.nl, met één kort gekleurd streepje linksboven. */
  /* 16 september 2026, 22:10 (Marinus): de eerste, donkerdere versie was mooier. Precies het
     verloop van de kaarten op socialnow.nl. */
  --ui-paneel-top:#0C1D32;
  --ui-paneel-midden:#06101E;
  --ui-paneel-onder:#040B15;
  --ui-paneel-verloop:linear-gradient(145deg,var(--ui-paneel-top) 0%,var(--ui-paneel-midden) 58%,var(--ui-paneel-onder) 100%);
  /* Titels zoals op socialnow.nl: fijne scanlines, een zachte RGB-rand en een lichte gloed. */
  --ui-titel-schaduw:1px 0 rgb(255 0 60 / .25),-1px 0 rgb(0 229 255 / .25),0 0 14px rgb(255 255 255 / .2);
  --ui-scanlines:repeating-linear-gradient(to bottom,rgb(0 0 0 / .14) 0 1px,transparent 1px 3px);
  --ui-detail:linear-gradient(90deg,var(--ui-milo,var(--sn-groen)),var(--ui-milo,var(--sn-groen))) 22px 0/44px 2px no-repeat;
  --ui-rand:rgb(255 255 255 / .08);
  --ui-rand-sterk:rgb(255 255 255 / .16);
  --ui-rand-hover:rgb(255 255 255 / .28);
  --ui-inkt:#FFFFFF;
  --ui-inkt-zacht:rgb(255 255 255 / .78);
  --ui-inkt-vaag:rgb(255 255 255 / .62);
  --ui-schaduw:0 1px 0 rgb(255 255 255 / .04) inset, 0 18px 48px rgb(0 0 0 / .5);
  --ui-glas:rgb(255 255 255 / .04);

  /* De balk is in beide standen donker: deze slaan niet om in de lichte stand. Donkerblauw met
     een zwart verloop dat langzaam beweegt (Marinus, 16 september 2026, 21:40). */
  --ui-balk:#040B15;
  --ui-balk-grond:#0A0A0A;
  --ui-balk-rgb:4 11 21;
  --ui-balk-verloop:linear-gradient(100deg,#040B15 0%,#0C1D32 22%,#050505 46%,#0A1A2E 70%,#040B15 100%);

  /* De glanzende groene hoofdactie. Wit erop, altijd. */
  --ui-groen-glans-top:#0C8039;
  --ui-groen-glans-onder:#096B30;
  --ui-groen-glans:linear-gradient(180deg,var(--ui-groen-glans-top) 0%,var(--ui-groen-glans-onder) 100%);
  --ui-groen-glans-licht:inset 0 1px 0 rgb(255 255 255 / .24), inset 0 -1px 0 rgb(0 0 0 / .25), 0 0 0 1px rgb(var(--sn-groen-rgb) / .45), 0 6px 22px rgb(var(--sn-groen-rgb) / .22);
  --ui-groen-inkt:#FFFFFF;

  /* Het rode cijfer naast een hoofd: rood vlak, wit cijfer, 4,83 op 1. */
  --ui-teller:var(--os-fout);
  --ui-teller-inkt:#FFFFFF;

  /* Accenttekst. In het donker de felle kleur zelf; in het licht de diepere tint. */
  --ui-accent-tekst:var(--sn-groen);
  --ui-link:var(--sn-blauw);

  /* Maat en vorm, gelijk in beide standen. */
  --ui-balk-hoogte:64px;
  --ui-radius-kaart:18px;
  --ui-radius-veld:12px;
  --ui-radius-pil:999px;
  --ui-streep:3px;
  --ui-ease:cubic-bezier(.16,1,.3,1);
  --ui-snel:160ms;

  /* Beweging, 19 september 2026. Eén set tijden en twee curves voor het hele OS. De regel van
     nu: kort (onder een kwart seconde voor iets kleins), alleen opacity en transform, en een
     curve die snel begint en zacht landt. Wat binnenkomt gebruikt --ui-ease-uit, wat verdwijnt
     --ui-ease-in, want verdwijnen mag korter en strakker dan verschijnen. */
  --ui-tijd-kort:120ms;   /* kleur, rand, een vinkje */
  --ui-tijd-basis:180ms;  /* knop, tab, chip */
  --ui-tijd-vlak:260ms;   /* kaart, paneel, venster */
  --ui-ease-uit:cubic-bezier(.22,1,.36,1);
  --ui-ease-in:cubic-bezier(.4,0,1,1);
  --ui-verschijn-y:8px;   /* de enige afstand waarover iets binnenkomt */
}
/* De lichte stand. De balk blijft zwart (één balk, overal identiek); daaronder licht papier. */
:root[data-theme="light"]{
  /* 16 september 2026, 21:50 (Marinus): in de lichte stand "lichter blauwe contrasten", want
     zwart op wit was soms te heftig. Lichtblauwe vlakken en donkerblauwe inkt. */
  --ui-grond:#F2F6FB;
  --ui-paneel:#FFFFFF;
  --ui-verhoogd:#E7EFF9;
  --ui-grond-rgb:242 246 251;
  --ui-paneel-rgb:255 255 255;
  --ui-paneel-top:#FFFFFF;
  --ui-paneel-midden:#F6F9FD;
  --ui-paneel-onder:#EAF1FA;
  --ui-rand:rgb(16 40 74 / .1);
  --ui-rand-sterk:rgb(16 40 74 / .18);
  --ui-rand-hover:rgb(16 40 74 / .3);
  --ui-inkt:#0C1D32;
  --ui-inkt-zacht:rgb(12 29 50 / .8);
  --ui-inkt-vaag:rgb(12 29 50 / .66);
  --ui-titel-schaduw:1px 0 rgb(255 0 60 / .12),-1px 0 rgb(0 160 200 / .14);
  --ui-scanlines:repeating-linear-gradient(to bottom,rgb(255 255 255 / .22) 0 1px,transparent 1px 3px);
  --ui-schaduw:0 1px 2px rgb(var(--sn-grond-rgb) / .05), 0 10px 30px rgb(var(--sn-grond-rgb) / .06);
  --ui-glas:rgb(var(--sn-grond-rgb) / .03);
  --ui-accent-tekst:var(--sn-groen-vlak);
  --ui-link:var(--os-blauw);
}

/* --- De vier Milo's -----------------------------------------------------
   Website, CRM, Studio en Advertenties dragen elk hun eigen accent. Marinus,
   11 september 2026: "de vier Milo's dragen elk hun eigen kleur (Website groen,
   CRM blauw, Studio geel, ADS roze)". Dat zijn precies de vier accenten hierboven,
   dus hier staat geen vijfde kleur maar een naam die zegt WAAR hij voor staat.

   Waarom ze apart staan en niet gewoon --sn-geel in de chat: os/chat.css mag geen
   letterlijke kleur bevatten en alleen tokens gebruiken die met --os- of --merk-
   beginnen (b74). Deze vier zijn de brug.

   Ze zijn in de lichte en de donkere stand dezelfde waarde, en dat kan omdat ze
   NOOIT achter tekst komen te staan. Ze dragen de streep boven de tegel, de ring
   om de Milo en de ring om de telling; het cijfer en de zin blijven --os-text.
   Geel op wit haalt 1,2 op 1, dus een gekleurd cijfer zou in de lichte stand door
   a20 heen zakken. Zie STIJL.md: een accent is een streep, een rand en een gloed. */
:root{
  --os-milo-website:var(--sn-groen);
  --os-milo-crm:var(--sn-blauw);
  --os-milo-content:var(--sn-geel);
  --os-milo-advertenties:var(--sn-roze);
  /* Dezelfde vier, doorzichtig. Ze staan hier als eigen token en niet als rgb() in de chat,
     want os/chat.css mag geen enkele kleurfunctie bevatten (b74). De randwaarde is de ring om
     het portret en om de telling, de zachte is het licht op de tegel die aan de beurt is. */
  --os-milo-website-rand:rgb(var(--sn-groen-rgb) / .55);
  --os-milo-website-zacht:rgb(var(--sn-groen-rgb) / .12);
  --os-milo-crm-rand:rgb(var(--sn-blauw-rgb) / .55);
  --os-milo-crm-zacht:rgb(var(--sn-blauw-rgb) / .12);
  --os-milo-content-rand:rgb(var(--sn-geel-rgb) / .55);
  --os-milo-content-zacht:rgb(var(--sn-geel-rgb) / .12);
  --os-milo-advertenties-rand:rgb(var(--sn-roze-rgb) / .55);
  --os-milo-advertenties-zacht:rgb(var(--sn-roze-rgb) / .12);

  /* De kleur van de Milo die nu aan de beurt is. os/chat.js zet deze drie per tegel op een
     van de vier hierboven; ze staan hier als stand voor wie geen gezicht heeft, zodat een
     tegel zonder ingestelde kleur nog steeds klopt in plaats van door te vallen naar zwart. */
  --os-milo:var(--os-accent);
  --os-milo-rand:var(--os-line-strong);
  --os-milo-zacht:var(--os-accent-soft);
}

/* --- LAAG 2: het systeem ------------------------------------------------ */
:root{
  /* Ondergrond en vlak */
  /* 16 september 2026: de ondergrond is zwart, niet meer donkerblauw (concept 14). */
  --os-diep:#0A0A0A;
  --os-diep-rgb:10 10 10;
  --os-donker:#0A1628;
  --os-donker-rgb:10 22 40;
  --os-inkt:#0F172A;
  --os-inkt-rgb:15 23 42;
  --os-papier:#FFFFFF;
  --os-papier-rgb:255 255 255;
  --os-licht:#F8FAFC;
  --os-licht-rgb:248 250 252;
  --os-zacht:#F1F5F9;
  --os-rand:#E2E8F0;
  --os-rand-rgb:226 232 240;

  /* Tekst */
  --os-tekst:#0F172A;
  --os-tekst-zacht:#475569;
  --os-tekst-vaag:#64748B;
  --os-tekst-licht:#94A3B8;
  --os-tekst-licht-rgb:148 163 184;

  /* Signaal. Rood alleen bij een fout, oranje alleen bij let op. */
  --os-goed:#059669;
  --os-goed-rgb:5 150 105;
  --os-goed-licht:#34D399;
  --os-goed-licht-rgb:52 211 153;
  --os-blauw:#1965C2;
  --os-blauw-rgb:25 101 194;
  --os-let-op:#F5940D;
  --os-let-op-diep:#8A5206;
  --os-let-op-vlak:#FEF3E2;
  --os-fout:#DC2626;

  /* De merkkleuren van Google, op één plek voor het inlogmerk. */
  --os-google-rood:#EA4335;
  --os-google-blauw:#4285F4;
  --os-google-geel:#FBBC05;
  --os-google-groen:#34A853;

  /* Typografie. TT Norms is de huisletter; is hij er niet, dan Inter, dan het
     systeem. Nooit Poppins of Nunito. */
  --os-font-kop:"TT Norms Pro","TT Norms","Inter",system-ui,sans-serif;
  --os-font-tekst:"TT Norms Pro","TT Norms","Inter",system-ui,sans-serif;
  --os-font-data:"TT Norms Pro","TT Norms",system-ui,sans-serif;
  --os-leading-strak:1.08;
  --os-leading-kop:1.15;
  --os-leading-tekst:1.65;
  --os-tracking-kop:-0.03em;
  --os-tracking-data:0.06em;

  /* Maten */
  --os-space-1:0.25rem;
  --os-space-2:0.5rem;
  --os-space-3:0.75rem;
  --os-space-4:1rem;
  --os-space-5:1.25rem;
  --os-space-6:1.5rem;
  --os-space-8:2rem;
  --os-space-10:2.5rem;
  --os-space-12:3rem;
  --os-space-16:4rem;
  --os-space-20:5rem;
  --os-space-24:6rem;
  --os-section-space:clamp(4rem, 8vw, 7rem);
  --os-page-gutter:clamp(1rem, 3vw, 2rem);
  --os-page-max:90rem;
  --os-reading-max:46rem;

  /* Vorm en diepte */
  --os-radius-xs:0.2rem;
  --os-radius-sm:0.375rem;
  --os-radius-md:0.5rem;
  --os-radius-lg:0.75rem;
  --os-radius-xl:1rem;
  --os-radius-pill:9999px;
  --os-shadow-card:0 8px 30px rgb(var(--os-inkt-rgb) / 0.08);
  --os-shadow-lift:0 16px 44px rgb(var(--os-inkt-rgb) / 0.14);

  /* Klantvriendelijke bediening. Tekstknoppen gebruiken deze rustige maten;
     pillen zijn alleen voor badges en schakelaars, rond alleen voor iconen. */
  --os-control-height:44px;
  --os-control-radius:11px;
  --os-control-pad-inline:14px;
  --os-card-radius:16px;
  --os-panel-radius:20px;
  --os-shadow-soft:0 1px 2px rgb(var(--os-inkt-rgb) / 0.04),0 10px 30px rgb(var(--os-inkt-rgb) / 0.05);

  /* Beweging. Fade en een kleine y, meer niet. Onderdelen verschijnen op hun
     definitieve plek: geen inschuiven, geen schaal, geen scheefstand. */
  --os-duration-fast:120ms;
  --os-duration-base:180ms;
  --os-ease-out:cubic-bezier(0.22, 1, 0.36, 1);

  /* De chatlaag. Marinus, 10 september 2026: de chat moet af van de duolingostijl en
     eruitzien als de Claude-desktopapp: donker, één rustige kolom, ingetogen letters.
     Donker in ÉÉN stand kan niet met de oppervlakken van laag 3, want --os-field en
     --os-text slaan om; dan is de chat in de lichte stand wit. Vaste hexcodes met vaste
     lichte inkt dus, precies zoals de specialistenkaarten op het dashboard.
     Er komt geen kleur bij het OS: alle waarden staan al in os/cockpit.css. De namen
     staan hier zodat os/chat.css er geen letterlijke kleur voor nodig heeft (tests/b74
     verbiedt die daar).

     LET OP, en dit kostte op 10 september 2026 een halve avond: os/app.css definieert
     een eigen set met dezelfde namen (--os-diep, --os-inkt, --os-tekst, --os-tekst-zacht,
     --os-tekst-vaag, --os-fout, --os-rand, --os-groen-licht) en draait die om in
     :root[data-theme="light"]. Die selector heeft een hogere specificiteit dan de :root
     hier én dan een klasse als .vqc, dus in de lichte stand is var(--os-diep) niet
     #070C1A maar #f7f9fc. Een chat die zijn zwart uit --os-diep haalde, was daardoor in
     de lichte stand wit, en aan de code was niets te zien.
     Daarom hebben --os-chat-veld en --os-chat-vlak hun eigen naam en hun eigen hexcode.
     De chat leest zijn oppervlakken alleen uit deze groep; dan kan geen enkel ander blad
     er nog onderuit. */
  /* 16 september 2026: de chat staat op het nieuwe zwart (concept 14). Nog steeds vaste
     waarden in één stand, om de reden hierboven; ze zijn gelijk aan --ui-* in het donker. */
  --os-chat-veld:#0A0A0A;
  --os-chat-vlak:#050505;
  --os-chat-op:#141414;
  --os-chat-lijn:rgb(255 255 255 / .08);
  --os-chat-lijn-sterk:rgb(255 255 255 / .16);
  --os-chat-inkt:#FFFFFF;
  --os-chat-inkt-zacht:rgb(255 255 255 / .78);
  --os-chat-inkt-vaag:rgb(255 255 255 / .62);
  --os-chat-accent-zacht:rgb(var(--os-goed-licht-rgb) / 0.14);
}

/* --- LAAG 3: de oppervlakken, lichte stand ------------------------------ */
:root{
  --os-field:var(--os-licht);
  --os-field-rgb:var(--os-licht-rgb);
  --os-panel:var(--os-papier);
  --os-panel-rgb:var(--os-papier-rgb);
  --os-raised:var(--os-zacht);
  --os-raised-rgb:241 245 249;
  --os-line:var(--os-rand);
  --os-line-strong:rgb(var(--os-inkt-rgb) / 0.24);
  --os-text:var(--os-tekst);
  --os-text-soft:var(--os-tekst-zacht);
  --os-text-faint:var(--os-tekst-vaag);
  /* De systeemkleur, niet die van de klant. De merkkleur is puur voor de balk boven; alles
     daaronder is het systeem, en dat ziet er bij iedereen hetzelfde uit.
     Hier stond var(--merk-kleur), terwijl de donkere stand (verderop) al --os-goed-licht
     gebruikte. Twee standen die iets anders deden met dezelfde vraag: in het licht liep het
     accent mee met de klant en in het donker niet. Dat valt niemand op tot je de twee naast
     elkaar zet, en dan klopt er één van de twee niet. */
  --os-accent:var(--os-goed);
  --os-accent-soft:rgb(var(--os-goed-rgb) / 0.10);
  /* 16 september 2026: de hoofdactie is overal het glanzende groen met wit (os/ontwerp.css);
     als effen vlak is dat het diepgroen, 5,45 op 1. */
  --os-primary-bg:var(--sn-groen-vlak);
  /* Vast licht, niet var(--merk-contrast). Het primaire vlak is sinds 27 augustus vast
     navy en dus geen merkvlak meer; de inkt hoort dan ook niet met de klant mee te lopen.
     Een klant met een LICHTE balk zet --merk-contrast op donker, en dan stond hier donkere
     tekst op een donker vlak. Dezelfde fout als bij de balk, één token verderop, en net zo
     onzichtbaar tot de eerste klant die hem raakt. Alleen --os-balk-ink volgt de klant. */
  --os-primary-ink:var(--os-papier);
  /* Idem: de focusring is systeem en geen merk. Een klant met een lichtgele huisstijl zou
     anders een focusring krijgen die op wit niet te zien is, en dan kun je met een
     toetsenbord niet meer zien waar je bent. */
  --os-focus:var(--os-goed);
  /* Het vlak van een kaart. Licht: wit op een rustige ondergrond, met een
     donkere balk erboven. Donker: leeg, want een gevuld paneel maakt het scherm
     dan grijs in plaats van bijna zwart. Eén naam, twee antwoorden, zodat een
     component niet hoeft te weten waar hij staat. */
  --os-kaart:var(--os-papier);
  --os-kaart-schaduw:0 1px 2px rgb(var(--os-inkt-rgb) / 0.05), 0 8px 24px rgb(var(--os-inkt-rgb) / 0.05);
  --os-balk:var(--merk-balk);
  --os-balk-ink:var(--merk-contrast);
  --os-balk-lijn:rgb(255 255 255 / 0.22);
  --os-balk-hover:rgb(255 255 255 / 0.12);
  --os-pil-rand:rgb(var(--os-goed-licht-rgb) / 0.45);
  --os-pil-ink:var(--os-goed-licht);
  /* Het raster hoort bij de donkere stand, waar het diepte geeft aan een bijna
     zwart veld. Een lichte werkruimte heeft het niet. */
  --os-grid:transparent;
}

/* --- LAAG 3: de oppervlakken, donkere stand -----------------------------
   Let op: de donkere stand haalt zijn vlakken uit de systeemlaag, niet uit de
   klantlaag. De kleur van de klant hoort op de balk en verder nergens. Zet je
   hier --merk-balk neer, dan is bij een klant met donkerrood het hele scherm
   donkerrood, en dat valt niet op zolang de klant toevallig navy heeft. B80
   bewaakt dat. */
:root[data-theme="dark"]{
  /* 16 september 2026: zwart, panelen donkerder dan de grond (concept 14). */
  --os-field:var(--os-diep);
  --os-field-rgb:var(--os-diep-rgb);
  --os-panel:var(--ui-paneel);
  --os-panel-rgb:var(--ui-paneel-rgb);
  --os-raised:var(--ui-verhoogd);
  --os-raised-rgb:20 20 20;
  --os-line:var(--ui-rand);
  --os-line-strong:var(--ui-rand-sterk);
  --os-text:var(--ui-inkt);
  --os-text-soft:var(--ui-inkt-zacht);
  --os-text-faint:var(--ui-inkt-vaag);
  --os-accent:var(--sn-groen);
  --os-accent-soft:rgb(var(--sn-groen-rgb) / 0.12);
  /* Hier stond het lichte groen met donkere inkt: zwarte tekst op een groene knop. */
  --os-primary-bg:var(--sn-groen-vlak);
  --os-primary-ink:var(--os-papier);
  --os-focus:var(--sn-groen);
  --os-kaart:transparent;
  --os-kaart-schaduw:none;
  --os-balk:var(--merk-balk);
  --os-balk-ink:var(--merk-contrast);
  --os-balk-lijn:var(--ui-rand-sterk);
  --os-balk-hover:rgb(var(--os-tekst-licht-rgb) / 0.14);
  --os-pil-rand:rgb(var(--os-goed-licht-rgb) / 0.40);
  --os-pil-ink:var(--os-goed-licht);
  --os-grid:transparent;
  --os-shadow-card:0 8px 30px rgb(0 0 0 / 0.35);
  --os-shadow-lift:0 16px 44px rgb(0 0 0 / 0.45);
}