/* Studio Mierenwerk - de inkt wisselen.
   Het merk heeft vier ondergronden (papier, wit, inkt, oxide) en voor elke ondergrond de
   passende inkt. De bezoeker mag ze zelf kiezen: klik op het onderste blok van het logo
   (of de knop eronder) en de hele site wisselt van vlak. inkt.js zet data-vlak op <html>
   en wisselt de logo-bestanden; deze css doet de rest met de tokens.

   Papier is de standaard (tokens.css). Hieronder alleen wat per vlak anders is. Overal
   waar iets NIET mee mag wisselen (de rode contactsectie, de vitrine met echte sites) worden
   de tokens lokaal teruggezet. */

html{background:var(--mw-paper);}

/* ---------- inkt: papieren letters op een zwart vel ---------- */
html[data-vlak="inkt"]{
  --mw-ink:#F2EDE2;
  --mw-paper:#111111;
  --mw-muted:#B9B2A5;
  --mw-line:#3A3733;
  --mw-soft:#1F1E1C;
  --mw-shadow:4px 4px 0 var(--mw-oxide);
}

/* ---------- oxide: papieren letters op het rode vlak ---------- */
html[data-vlak="oxide"]{
  --mw-ink:#F2EDE2;
  --mw-paper:#B23A2E;
  --mw-muted:#F2E4DC;
  --mw-line:#C9655A;
  --mw-soft:#A3352A;
  --mw-oxide:#F2EDE2;                 /* het accent wordt papier, want rood op rood is niets */
  --mw-shadow:4px 4px 0 #111111;
}
html[data-vlak="oxide"] .mw-button{background:#111111; border-color:#111111; color:#F2EDE2;}
html[data-vlak="oxide"] .mw-button--secondary{background:transparent; color:#F2EDE2; border-color:#F2EDE2;}
html[data-vlak="oxide"] .mw-button--light{background:#F2EDE2; border-color:#F2EDE2; color:#111111;}

/* het hero-logo volgt de inkt: dezelfde kleur als de geleverde paper-transparent-variant */
#heroLogo path{fill:var(--mw-ink);}

/* de contactsectie blijft altijd rood met papier en een inktzwarte kaart */
.on-oxide{
  --mw-ink:#111111; --mw-paper:#F2EDE2; --mw-oxide:#B23A2E; --mw-muted:#57524A;
  --mw-line:#C9C3B9; --mw-soft:#E7E0D4; --mw-shadow:4px 4px 0 #B23A2E;
  background:#B23A2E; color:#F2EDE2;
}
html[data-vlak="oxide"] .on-oxide{border-top:1.5px solid #F2EDE2;}

/* de vitrine toont andermans site: altijd op papier, wat de bezoeker ook koos */
.vitrine{
  --mw-ink:#111111; --mw-paper:#F2EDE2; --mw-oxide:#B23A2E; --mw-muted:#57524A;
  --mw-line:#C9C3B9; --mw-soft:#E7E0D4;
}

/* de knop onder het logo, naast "plaats het blok" */
.inkt-knop{background:none; border:0; min-height:44px; padding:8px 12px; font:inherit; font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--mw-muted); cursor:pointer; transition:color .15s;}
.inkt-knop:hover{color:var(--mw-oxide);}
.inkt-knop i{display:inline-block; width:10px; height:10px; border:1.5px solid currentColor; margin-right:8px; vertical-align:-1px; background:var(--inkt-volgende,transparent);}
#heroLogo .mw-bottom{cursor:pointer;}
.hero-knoppen{display:flex; gap:4px; flex-wrap:wrap; justify-content:center;}

@media(prefers-reduced-motion:no-preference){
  body, .site-header, .wl-thumb, .mw-button{transition:background-color .35s var(--mw-ease), color .35s var(--mw-ease), border-color .35s var(--mw-ease);}
}