/* Huisstijltokens. Licht is de standaard, donker volgt de instelling van het systeem (prefers-color-scheme).
   Bovenaan per modus de vaste kleuren uit de huisstijl, daaronder wat ervan is afgeleid (knoppen, bellen, logovlak). */

:root {
  color-scheme: light;

  --achtergrond: #f7f6f3;        /* ivoor */
  --vlak: #ffffff;               /* kaarten, velden */
  --haarlijn: #e8e5df;
  --tekst: #1f1f1d;              /* houtskool */
  --secundair: #6b6862;          /* stone */
  --accent: #33b1f5;             /* blauw, alleen voor wat op jou wacht: streep, badge, werkt-puntje, verzendknop, actieve status */
  /* Kleine blauwe tekst (soortregel, aantallen op de chips, blauwe links, "werkt" en "Nu bezig"): het accent zelf haalt
     op wit maar 2,40:1. Dit is hetzelfde blauw (tint 201 graden) donkerder: 5,22:1 op #ffffff, 4,83:1 op #f7f6f3,
     5,00:1 op #fbfaf8 en 4,50:1 op #f0eee9 (WCAG 2.1, eis 4,5:1). Strepen, badges, stippen, ringen en de verzendknop
     blijven --accent. */
  --accent-tekst: #0a72ad;
  --waarschuwing-vlak: #f5efdf;  /* het label "Nog niet verstuurd" */
  --waarschuwing: #8a6d1f;
  --goed: #3e7a4e;
  --fout: #b4442c;
  --netwerklijn: #1f1f1d;
  --toekomstig: #d3cec4;         /* medewerkers die nog komen */

  /* afgeleid */
  --vlak-rechts: #fbfaf8;        /* het dossier in de brede indeling */
  --knop: #1f1f1d;
  --knop-tekst: #ffffff;
  --knop-licht: #f0eee9;
  --knop-licht-tekst: #1f1f1d;
  --op-accent: #1f1f1d;          /* teken op het blauw: houtskool leest beter dan wit */
  --accent-op-knop: #33b1f5;     /* blauwe tekst op een houtskool knop (gekozen chip): 6,88:1 */
  --dim: rgba(31, 31, 29, .32);  /* achter het paneel van een medewerker */
  --bel-ik: #1f1f1d;
  --bel-ik-tekst: #ffffff;
  --logo-vlak: transparent;
  --logo-rand: 0;

  --letter-tekst: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --letter-kop: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-kaart: 12px;
  --radius-knop: 9px;
  --raak: 44px;                  /* kleinste aanraakvlak */
  --kop-hoogte: 65px;            /* kop zonder de veilige zone bovenaan, inclusief haarlijn */
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --achtergrond: #171716;
    --vlak: #22221f;
    --haarlijn: #33322e;
    --tekst: #f2f0ea;            /* ivoor */
    --secundair: #a19d94;
    --netwerklijn: #d8d4cb;
    --toekomstig: #4a4842;
    /* Het blauw en de waarschuwing blijven gelijk. Goed en fout zijn lichter, anders lezen ze slecht op het donkere vlak. */
    --accent-tekst: #33b1f5;     /* het gewone blauw: 6,64:1 op #22221f, 7,47:1 op #171716 */
    --accent-op-knop: #0a72ad;   /* de knop is hier ivoor (#f2f0ea): 4,58:1 */
    --dim: rgba(0, 0, 0, .5);
    --goed: #7dbb8c;
    --fout: #e38b75;

    /* afgeleid */
    --vlak-rechts: #1b1b19;
    --knop: #f2f0ea;
    --knop-tekst: #1f1f1d;
    --knop-licht: #33322e;
    --knop-licht-tekst: #f2f0ea;
    --bel-ik: #33322e;
    --bel-ik-tekst: #f2f0ea;
    --logo-vlak: #f2f0ea;        /* het logo is grijs: op houtskool een klein licht vlak eronder */
    --logo-rand: 3px 6px;
  }
}