/* Ontwerpuitgangspunt: briefing §4.8. De doelgroep is overprikkelingsgevoelig.
   Hoog contrast, geen animaties, geen kleuraccenten die iets "willen".
   De enige kleur met betekenis is de statuskleur, en die is gedempt.

   Geen buildstap: dit bestand is de enige plek waar kleuren staan. */

:root {
  /* Papier en inkt. Warme witte ondergrond leest rustiger dan zuiver wit. */
  --papier: #fbfaf8;
  --vlak: #ffffff;
  --vlak-zacht: #f2f0ec;
  --inkt: #1c1f23;
  --inkt-zacht: #4a5057;
  /* #767d85 haalde 4,16:1 op wit en 3,99:1 op papier — onder de 4,5:1 die
     WCAG AA vraagt voor gewone tekst, terwijl briefing §4.8 juist om hoog
     contrast vraagt.

     Deze waarde is gekozen op het donkerste vlak waar gedempte tekst op staat,
     niet op wit: op --accent-zacht (de actieve tab, de cliëntchip) haalt hij
     4,59 en op wit 5,47. Kiezen op wit alleen leverde tekst op die op een grijs
     vlak alsnog zakte — dat vond ops/doorloop.py meteen. */
  --inkt-licht: #646a71;
  --op-gevuld: #ffffff;

  --rand: #ddd9d3;
  --rand-sterk: #b9b4ac;

  /* Eén accent, donker en rustig. Geen felle kleur, geen gradient. */
  --accent: #2f5d62;
  --accent-donker: #234649;
  --accent-zacht: #e4eded;

  /* Status. Gedempt, en altijd met tekst erbij — kleur alleen is niet genoeg. */
  --goed: #2d6a4f;      --goed-zacht: #e6f0ea;
  --aandacht: #8a5a12;  --aandacht-zacht: #f7efdf;
  --stop: #99302b;      --stop-zacht: #f7e7e6;
  --rust: #3d5a80;      --rust-zacht: #e8eef5;
  /* Alleen voor het team: eigen kleur, zodat je in één blik ziet welke regels de
     cliënt niet leest — en dat het schrijfvak in die stand staat. Via --rust, dus
     de nachtvariant komt vanzelf mee. */
  --team: var(--rust);  --team-zacht: var(--rust-zacht);
  /* Een concept van een plan: wat je hier wijzigt, geldt nog niet. Oranje, net
     als het merkje "in de maak", zodat stand en merkje dezelfde taal spreken. */
  --concept: var(--aandacht);  --concept-zacht: var(--aandacht-zacht);
  /* De kijker (een document over het hele scherm) is in beide thema's donker. */
  --kijker-achter: rgba(16, 18, 20, .94);  --kijker-balk: #1c1f23;
  --kijker-inkt: #eceef0;  --kijker-inkt-zacht: #b4bbc2;

  /* Breedte van het werkvlak: de balk, de tabs en de inhoud. De zijbalk telt
     hier niet in mee — die hoort tegen de linkerrand van het scherm en schuift
     dus niet mee met het centreren. Zonder plafond loopt de inhoud op een
     breedbeeld door tot de rechterrand en wordt een tabel onleesbaar breed. */
  --breedte-werkvlak: 1320px;

  /* De maat van een vinkje. Staat hier omdat twee regels hem nodig hebben:
     de vorm zelf, en de uitzondering in een bedieningsrij waar een
     invoerveld een vaste breedte krijgt. */
  --vinkje: 22px;

  --radius: 10px;
  --radius-klein: 6px;
  --schaduw: 0 1px 2px rgba(28, 31, 35, .06);

  /* Systeemfonts: geen externe lettertypen, dus ook geen verzoek naar Google
     Fonts vanaf een zorgsysteem. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Twee iconen die niet naast een label staan maar ín een veld: de pijl van
     een uitklapmenu en het kalenderknopje van een datumveld. Die tekent de
     browser standaard zelf, per besturingssysteem anders. Hier met de hand
     getekend in dezelfde lijn als js/ui/iconen.js — 24-vierkant, één lijndikte,
     ronde uiteinden, geen vulling.

     Ze staan hier en niet in components.css omdat er een kleur in vastzit:
     een data-URI kent `currentColor` niet, dus de nachtmodus heeft zijn eigen
     variant. Dat is meteen de reden om ze als token te zetten — dan staat de
     kleurkeuze op dezelfde plek als alle andere. */
  --pijl-omlaag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5057' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.8 9.6 5.2 5.2 5.2-5.2'/%3E%3C/svg%3E");
  --kalender: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5057' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.8' y='5.6' width='16.4' height='14.2' rx='1.8'/%3E%3Cpath d='M8.2 3.6v3.8'/%3E%3Cpath d='M15.8 3.6v3.8'/%3E%3Cpath d='M3.8 10.4h16.4'/%3E%3C/svg%3E");

  color-scheme: light;
}

:root[data-theme="dark"] {
  --papier: #16181b;
  --vlak: #1e2125;
  --vlak-zacht: #24282d;
  --inkt: #eceef0;
  --inkt-zacht: #b4bbc2;
  --inkt-licht: #868e97;
  --op-gevuld: #16181b;

  --rand: #32373d;
  --rand-sterk: #4b525a;

  --accent: #7fb3b8;
  --accent-donker: #9ac6ca;
  --accent-zacht: #22383a;

  --goed: #7cc4a0;      --goed-zacht: #1c2e26;
  --aandacht: #d8a95a;  --aandacht-zacht: #2f2718;
  --stop: #e08b86;      --stop-zacht: #331e1d;
  --rust: #8fadd1;      --rust-zacht: #1d2733;

  --schaduw: 0 1px 2px rgba(0, 0, 0, .3);

  --pijl-omlaag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4bbc2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.8 9.6 5.2 5.2 5.2-5.2'/%3E%3C/svg%3E");
  --kalender: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4bbc2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.8' y='5.6' width='16.4' height='14.2' rx='1.8'/%3E%3Cpath d='M8.2 3.6v3.8'/%3E%3Cpath d='M15.8 3.6v3.8'/%3E%3Cpath d='M3.8 10.4h16.4'/%3E%3C/svg%3E");

  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* `hidden` moet winnen van elke display-regel die wij zelf zetten. Zonder deze
   regel verliest de UA-regel [hidden]{display:none} van bijvoorbeeld
   .knop{display:inline-flex}, en dan staat een knop die verborgen zou moeten
   zijn er gewoon. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* Geen scrollbar-gutter meer hier: de pagina scrolt niet, het werkvlak wel,
     en daar staat hij nu (layout.css). Op html hield hij een lege strook van
     15px vrij rechts naast de balk. */
}

body {
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--font);
  /* 16px basis: kleiner leest niet prettig voor deze doelgroep. */
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3 { line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

a { color: var(--accent); }
a:hover { color: var(--accent-donker); }

/* Geen animaties. Niet omdat het kan, maar omdat briefing §4.8 het vraagt. */
*, *::before, *::after { animation: none !important; transition: none !important; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sla-over {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--op-gevuld);
  padding: .75rem 1rem; z-index: 100;
}
.sla-over:focus { left: 0; }

.laden { padding: 2rem; color: var(--inkt-licht); }