/* =====================================================================
   Thema 1 — WORKSHOP
   Licht en ruim. Wit, lichtgrijs, staalblauw, donkerblauw.
   Nette werkplaats: scherpe borders, minimale radius, subtiele schaduw.
   ===================================================================== */

[data-resolved-theme="light"] {
  --bg: #eaeef3;
  --bg-2: #dde4ec;
  --panel: #ffffff;
  --panel-2: #f4f7fa;
  --ink: #16202e;
  --ink-2: #43536a;
  --ink-3: #5f6d80;
  --border: #d0d9e3;
  /* De vier kleuren uit Instellingen -> Kleuren, met de oorspronkelijke blauwtinten als terugval:
     kiest niemand iets, dan blijft dit thema precies zoals het was.

     De rolverdeling volgt het contrast, niet de smaak. `--accent` draagt de gevulde vlakken en
     knoppen met witte tekst erop, dus dat is de DONKERE merkvariant. `--accent-2` vult de lichtere
     vlakken -- ook daar staan witte letters op. `--link` is de kleur van tekst: links, iconen en
     labels. Die drie moeten uit elkaar blijven, want een vlak wil donker zijn en tekst op een
     donkere kaart juist licht.

     Met de kleuren van het logo erin gemeten: wit op #6E2D77 is 9,1:1 en #923C9F op wit is 6,2:1 --
     allebei ruim boven de 4,5:1 die tekst nodig heeft. */
  /* De vierde kleur heet in het beheer "warme tint" en wordt daar omschreven als zachte vlakken en
     accenten. Dit thema heeft geen warm vlak; het gebruikt hem als kleur van de zwaardere lijnen,
     waar het grijs uit het logo precies op zijn plek is. Diezelfde sleutel doet dus in het ene thema
     iets anders dan in het andere -- dat hoort bij één set kleuren die negen thema's moeten
     bedienen, maar het is goed om te weten als je hem hier verandert en iets anders verwacht. */
  /* Alleen in de lichte stand: op een donkere kaart zou dit grijs de randen laten oplichten in
     plaats van ze rustig te houden. De nachtstand houdt daarom zijn eigen randkleur. */
  --border-strong: var(--local-warm, #b0bccb);
  --accent: var(--local-brand-dark, #17335c);
  --accent-2: var(--local-brand, #2c6ab0);
  --link: var(--local-brand, #2c6ab0);
  /* Aparte hoverkleur voor TEKST. Op een lichte pagina wil je bij hover donkerder worden, in het
     donker juist lichter -- met één kleur voor allebei wordt een link in de nachtmodus onleesbaar
     op het moment dat je hem aanwijst. */
  --accent-hover: var(--local-brand-dark, #17335c);
  --accent-ink: #ffffff;
  --panel-radius: 3px;
  --shadow-1: 0 1px 2px rgba(23,51,92,.07);
  --shadow-2: 0 6px 18px rgba(23,51,92,.13);
}

[data-resolved-theme="dark"] {
  --bg: #10161f;
  --bg-2: #161f2b;
  --panel: #1a2432;
  --panel-2: #202c3c;
  --ink: #e7edf5;
  --ink-2: #aebccc;
  --ink-3: #7d8da0;
  --st-alert-tekst: #ff8b80;
  --border: #2c3a4d;
  --border-strong: #3c4d64;
  /* In het donker draaien de rollen om: de gewone merkkleur is hier donker genoeg om wit op te
     zetten (6,2:1), en de linkkleur moet juist lichter worden om van de donkere kaart af te komen.

     Die lichtere tint wordt hier gemengd in plaats van als vijfde instelling gevraagd. Eén kleur
     minder om te kiezen, en hij kan niet uit de pas gaan lopen met de rest. Het accent uit de
     instellingen (#B85CC4) haalt zo 5,8:1 op een donkere kaart; het blauw dat hier stond haalde
     2,8:1 en was daarmee al te flauw -- die terugval wordt dus ook meteen beter. */
  --accent: var(--local-brand, #2c6ab0);
  /* Het VLAK blijft de merkkleur zelf: daar staan witte letters op (6,2:1). Hem hier oplichten
     leek logisch omdat links lichter moeten zijn, maar dan zakt wit op zo'n vlak naar 2,7:1 --
     en dat gebeurde op de rekenpagina's, waar de gekozen knoppen en de nummerbolletjes precies
     deze kleur gebruiken. Oplichten doet daarom alleen `--link` hieronder. */
  --accent-2: var(--local-brand, #4d92e0);
  --link: color-mix(in srgb, var(--local-accent, #4d92e0) 75%, #ffffff);
  /* Wit bij hover: op een donkere kaart is dat de enige kleur die altijd goed leesbaar is, en het
     verschil met de gewone linkkleur blijft duidelijk zichtbaar. Dit geldt ook op een installatie
     die geen kleuren heeft gekozen: daar werd een link bij het aanwijzen juist donkerder, wat op een
     donkere pagina precies de verkeerde kant op is. */
  --accent-hover: #ffffff;
  --accent-ink: #ffffff;
  --panel-radius: 3px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 22px rgba(0,0,0,.5);
}

/* Werkplaatssfeer: fijne rasterachtergrond op de body. Vastgezet
   (background-attachment: fixed, verzoek Theo): het rasterpapier blijft
   staan terwijl de inhoud eroverheen scrolt. */
body {
  background-image:
    linear-gradient(var(--bg-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-2) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
  background-attachment: fixed;
}
[data-resolved-theme="dark"] body { background-image: none; }

/* Hero-media: lichte werkplaats-placeholder met bus-silhouet */
.theme-workshop .hero__media {
  background:
    repeating-linear-gradient(45deg, var(--panel-2) 0 12px, var(--bg-2) 12px 24px);
}
.theme-workshop .hero {
  border: 1px solid var(--border);
}
.theme-workshop .panel__head { text-transform: none; }

/* Diensttegel: medaillon volgt de huiskleur per dienst (--tile) */
.theme-workshop .service-tile__foot { border-top-style: dashed; }

/* Nette "toolboard" accent op sectiekop */
.theme-workshop .section-title h2 { position: relative; padding-left: 14px; }
.theme-workshop .section-title h2::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px;
  background: var(--accent-2); border-radius: 2px;
}