/* ══════════════════════════════════════════════════════════════════════════
   Laag 3: onderdelen (component tokens)
   ══════════════════════════════════════════════════════════════════════════

   Per onderdeel, en per staat van dat onderdeel. Hier staat wat een knop in
   rust is, wat hij wordt als je eroverheen gaat, en welke maat hij heeft.
   Een component in de stijlbladen hieronder verwijst alleen nog naar deze
   namen; wie de knop wil veranderen hoeft niet te zoeken waar de kleur
   vandaan komt.

   Naamsvorm:  --mw-<onderdeel>-<variant>-<eigenschap>[-<staat>]

   Voorbeeld:  --mw-knop-primair-vlak-hover
               onderdeel: knop, variant: primair, eigenschap: vlak,
               staat: hover.

   Een onderdeel hoort hier zijn eigen token te krijgen, ook als de waarde
   gelijk is aan de betekenislaag. Dat lijkt dubbel, maar het is precies wat
   je later nodig hebt: je kunt de knop apart aanpassen zonder alles wat
   diezelfde kleur gebruikt mee te veranderen.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Knop ───────────────────────────────────────────────────────────────
     Primair is fel groen met donkergroene tekst en een donkergroen rondje.
     Secundair is doorzichtig met een donkergroene rand die bij hover vult.
     Op een donker vlak wordt de rand wit. */
  --mw-knop-hoogte:           var(--mw-knop);
  --mw-knop-hoogte-formulier: var(--mw-knop-formulier);
  --mw-knop-hoogte-mobiel:    var(--mw-knop-mobiel);
  --mw-knop-straal:           var(--mw-straal-rond);
  --mw-knop-tekstmaat:        var(--mw-tekst);
  --mw-knop-ruimte:           var(--mw-ruimte-6);   /* tussen rondje en label */
  --mw-knop-randdikte:        var(--mw-rand-dikte);

  --mw-knop-primair-vlak:        var(--mw-felgroen);
  --mw-knop-primair-tekst:       var(--mw-donkergroen);
  --mw-knop-primair-vlak-hover:  var(--mw-donkergroen);
  --mw-knop-primair-tekst-hover: var(--mw-felgroen);

  --mw-knop-secundair-vlak:       transparent;
  --mw-knop-secundair-tekst:      var(--mw-donkergroen);
  --mw-knop-secundair-rand:       var(--mw-donkergroen);
  --mw-knop-secundair-vlak-hover: var(--mw-felgroen);

  --mw-knop-licht-rand:       var(--mw-rand-donker);
  --mw-knop-licht-tekst:      var(--mw-tekst-op-donker);
  --mw-knop-licht-vlak-hover: var(--mw-felgroen);
  --mw-knop-licht-tekst-hover:var(--mw-donkergroen);

  --mw-knop-rond-maat:        var(--mw-badge-klein);
  --mw-knop-rond-vlak:        var(--mw-donkergroen);
  --mw-knop-rond-teken:       var(--mw-felgroen);

  /* ── Veld ─────────────────────────────────────────────────────────────── */
  --mw-veld-hoogte:      var(--mw-knop-formulier);
  --mw-veld-vlak:        var(--mw-vlak);
  --mw-veld-tekst:       var(--mw-donkergroen);
  --mw-veld-rand:        var(--mw-grijs-rand);
  --mw-veld-randdikte:   var(--mw-rand-dikte);
  --mw-veld-plekhouder:  var(--mw-tekst-plekhouder);
  --mw-veld-rand-focus:  var(--mw-donkergroen);
  --mw-veld-ring-focus:  var(--mw-kleur-neon-a45);
  --mw-veld-straal:      var(--mw-straal-veld);
  --mw-veld-ruimte:      var(--mw-ruimte-8);
  --mw-veld-label:       var(--mw-grijs-zacht);
  --mw-veld-fout:        var(--mw-fout);

  /* Een veld dat niet te bedienen is, en een veld dat je wel mag lezen maar
     niet wijzigen. Twee verschillende dingen, dus twee namen: uitgeschakeld
     is grijs en dof, alleen-lezen houdt zijn tekst maar verliest zijn rand. */
  --mw-veld-vlak-uit:    var(--mw-vlak-grijs);
  --mw-veld-tekst-uit:   var(--mw-grijs-zacht);
  --mw-veld-rand-uit:    var(--mw-rand);
  --mw-veld-vlak-lezen:  var(--mw-vlak-grijs);
  --mw-veld-teken:       var(--mw-grijs-tekst);

  /* De periodeschakelaar op het dashboard: een grijze balk met een pil erin.
     De pil moet los te zien zijn van de balk, ook als het geheel op een grijze
     pagina staat; daarom wit met een rand en niet alleen wit. */
  --mw-periode-vlak:          var(--mw-vlak-grijs);
  --mw-periode-tekst:         var(--mw-grijs-tekst);
  --mw-periode-pil:           var(--mw-vlak);
  --mw-periode-pil-rand:      var(--mw-grijs-rand);
  --mw-periode-tekst-actief:  var(--mw-donkergroen);
  --mw-periode-vlak-hover:    var(--mw-kleur-wit-a60);

  /* De schakelaar: aan is het accent, uit is een grijze baan. */
  --mw-schakelaar-baan:       var(--mw-grijs-rand);
  --mw-schakelaar-baan-aan:   var(--mw-felgroen);
  --mw-schakelaar-knop:       var(--mw-vlak);
  --mw-schakelaar-rand-aan:   var(--mw-donkergroen);

  /* Het vak waar je een bestand in kunt slepen. */
  --mw-bestand-vlak:      var(--mw-vlak);
  --mw-bestand-rand:      var(--mw-grijs-rand);
  --mw-bestand-vlak-over: var(--mw-mint);
  --mw-bestand-rand-over: var(--mw-donkergroen);

  /* ── Kaart ────────────────────────────────────────────────────────────── */
  --mw-kaart-vlak:     var(--mw-vlak);
  --mw-kaart-rand:     var(--mw-rand);
  --mw-kaart-straal:   var(--mw-straal-kaart);
  --mw-kaart-ruimte:   var(--mw-ruimte-14);
  --mw-kaart-titel:    var(--mw-titel);
  --mw-kaart-vlak-hover: var(--mw-pagina);

  /* ── Team ─────────────────────────────────────────────────────────────── */
  /* Het vierkante portret op een teamkaartje. Groot genoeg om een gezicht te
     herkennen, klein genoeg dat naam en rol ernaast passen in een kolom van
     een derde van de sectie. */
  --mw-team-portret:   96px;

  /* Naam en rol staan in elk kaartje op dezelfde lijn. De naam krijgt daarom
     de hoogte van twee regels: onder een korte naam en onder een naam die
     omslaat begint de rol dan op dezelfde plek. Drie kaartjes naast elkaar
     lezen zo als drie regels en niet als drie losse blokjes. */
  --mw-team-naam:        var(--mw-tekst);
  --mw-team-rol:         var(--mw-label);
  --mw-team-naam-hoogte: calc(2 * var(--mw-team-naam) * var(--mw-regel-kop));

  /* ── Sectie ───────────────────────────────────────────────────────────── */
  --mw-sectie-straal:  var(--mw-straal-sectie);
  --mw-sectie-afstand: var(--mw-sectie);

  /* ── Merk ─────────────────────────────────────────────────────────────── */
  --mw-merk-gat:          var(--mw-ruimte-5);
  --mw-merk-tekst:        var(--mw-donkergroen);
  --mw-merk-tekst-donker: var(--mw-tekst-op-donker);
  --mw-merk-gewicht:      var(--mw-gewicht-merk);
  --mw-merk-spatie:       var(--mw-spatie-3);

  /* ── Melding ──────────────────────────────────────────────────────────── */
  --mw-melding-straal:     var(--mw-straal-kaart);
  --mw-melding-ruimte:     var(--mw-ruimte-7) var(--mw-ruimte-10);
  --mw-melding-goed-vlak:  var(--mw-goed-vlak);
  --mw-melding-goed-tekst: var(--mw-goed);
  --mw-melding-fout-vlak:  var(--mw-fout-vlak);
  --mw-melding-fout-tekst: var(--mw-fout);
  --mw-melding-let-vlak:   var(--mw-let-op-vlak);
  --mw-melding-let-tekst:  var(--mw-let-op);

  /* ── Cookiemelding ────────────────────────────────────────────────────── */
  --mw-cookie-vlak:        var(--mw-vlak);
  --mw-cookie-rand:        var(--mw-rand);
  --mw-cookie-straal:      var(--mw-straal-sectie);
  --mw-cookie-ruimte:      var(--mw-ruimte-12);
  --mw-cookie-breedte:     520px;
  --mw-cookie-knop-rand:   var(--mw-kleur-groen-a20);
  --mw-cookie-knop-hover:  var(--mw-felgroen);

  /* ── Code en sleutels in het CMS ─────────────────────────── */
  /* Een sleutel, een adres of een commando lees je teken voor teken, dus daar
     hoort een letter bij waarin een nul en een O niet hetzelfde zijn. */
  --mw-cms-code-letter: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Chatvenster (Wattje) ───────────────────────────────── */
  --mw-chat-knop-maat:     60px;
  /* De bel is rond, ook als de knoppen van de site een zachte hoek hebben:
     --mw-straal-rond volgt de vormkeuze uit Instellingen, en een pasfoto in een
     afgeronde vierkant is geen pasfoto meer. */
  --mw-chat-knop-straal:   var(--mw-straal-vol);
  /* Het icoon in de bel. Stond als kale 26px in wattje.css en viel klein uit
     in een rondje van 60. */
  --mw-chat-knop-icoon:    32px;
  --mw-chat-knop-vlak:     var(--mw-felgroen);
  --mw-chat-knop-tekst:    var(--mw-donkergroen);
  --mw-chat-knop-hover:    var(--mw-felgroen-diep);
  --mw-chat-breedte:       400px;
  --mw-chat-hoogte:        min(620px, calc(100vh - 120px));
  --mw-chat-vlak:          var(--mw-vlak);
  --mw-chat-rand:          var(--mw-rand);
  --mw-chat-straal:        var(--mw-straal-sectie);
  --mw-chat-kop-vlak:      var(--mw-vlak-donker);
  --mw-chat-kop-tekst:     var(--mw-tekst-op-donker);
  --mw-chat-kop-zacht:     var(--mw-tekst-op-donker-zacht);
  --mw-chat-mij-vlak:      var(--mw-felgroen);
  --mw-chat-mij-tekst:     var(--mw-donkergroen);
  --mw-chat-bot-vlak:      var(--mw-vlak-grijs);
  --mw-chat-bot-tekst:     var(--mw-donkergroen);
  --mw-chat-bel-straal:    var(--mw-straal-kaart);
  --mw-chat-ruimte:        var(--mw-ruimte-8);
  --mw-chat-tip-vlak:      var(--mw-vlak);
  --mw-chat-tip-tekst:     var(--mw-donkergroen);
  --mw-chat-tip-breedte:   232px;
  --mw-chat-invoer-max:    120px;   /* hoger dan dit groeit het tekstveld niet mee */

  /* ── Sectienavigatie ──────────────────────────────────────────────────── */
  --mw-sectienav-vlak:        var(--mw-vlak-grijs);
  --mw-sectienav-pil:         var(--mw-vlak);
  --mw-sectienav-stip:        var(--mw-felgroen);
  --mw-sectienav-tekst:       var(--mw-grijs-zacht);
  --mw-sectienav-tekst-actief:var(--mw-donkergroen);

  /* ── Beheeromgeving ───────────────────────────────────────────────────── */
  --mw-cms-zijbalk-vlak:   var(--mw-donkergroen);
  --mw-cms-zijbalk-tekst:  var(--mw-tekst-op-donker-zacht);
  --mw-cms-zijbalk-actief: var(--mw-kleur-wit-a10);
  --mw-cms-zijbalk-breed:  264px;
  --mw-cms-top-vlak:       var(--mw-kleur-grijs-50-a90);

  --mw-cms-tekst:   var(--mw-maat-500);
  --mw-cms-klein:   var(--mw-maat-400);
  --mw-cms-label:   var(--mw-maat-300);
  --mw-cms-mini:    var(--mw-maat-200);
  --mw-cms-micro:   var(--mw-maat-100);
  --mw-cms-marge:   var(--mw-ruimte-14);

  /* ── Voorvertoning van een zoekresultaat ──────────────────────────────
     De enige plek met vreemde kleuren, en met opzet: zo toont Google het. */
  --mw-serp-titel: var(--mw-kleur-serp-titel);
  --mw-serp-adres: var(--mw-kleur-serp-adres);
  --mw-serp-tekst: var(--mw-kleur-serp-tekst);

  /* ── Tabel ────────────────────────────────────────────────────────────── */
  --mw-tabel-rand:     var(--mw-rand);
  --mw-tabel-kop:      var(--mw-grijs-tekst);
  --mw-tabel-cel:      var(--mw-ruimte-6) var(--mw-ruimte-4);
  --mw-tabel-hover:    var(--mw-vlak-grijs);
}