/* ==========================================================================
   tokens.css · kleuren, lettertypes en maten (SPEC §8). Werkpakket APP.
   Wervora-DNA, maar rustiger: crème, inkt, koraal en limoen. Harde hoeken.
   Licht en donker via prefers-color-scheme. Statusvlakken (koraal, limoen,
   let-op-geel) blijven in beide modi licht, met inkt erop.
   Contrast (WCAG 2.1 AA) is nagerekend: zie de opmerkingen per kleur.
   ========================================================================== */

:root {
  /* Merkkleuren */
  --creme: #f6f5ef;
  --inkt: #171b20;
  --koraal: #ff6b5b;          /* alleen als vlak; inkt erop: 6,2:1 */
  --koraal-tekst: #b4372a;    /* koraal als tekst op licht: 5,5:1 op crème */
  --limoen: #e7ff00;          /* alleen als vlak; inkt erop: 15:1 */
  --donker: #111418;
  --grijs: #5b5e64;           /* secundaire tekst: 6,0:1 op crème */

  /* Status */
  --status-oplichting-vlak: var(--koraal);
  --status-oplichting-tekst: var(--inkt);
  --status-letop-vlak: #f4dca6;
  --status-letop-tekst: #422e0c;   /* 9,8:1 */
  --status-klopt-vlak: var(--limoen);
  --status-klopt-tekst: var(--inkt);
  --letop-vlak: var(--status-letop-vlak);
  --letop-tekst: var(--status-letop-tekst);

  /* Papier: de brief blijft altijd licht, ook in donker */
  --papier: #fbfaf6;
  --papier-inkt: #1b1f24;
  --papier-grijs: #55585e;    /* 6,8:1 op papier */
  --papier-lijn: #d9d6ca;
  --alarm-tint: #ffdcd6;
  --ok-tint: #f2ffa8;
  --ok-inkt: #3d5800;         /* 7,7:1 op papier */
  --prive-tint: #e4e2d8;

  /* Betekenis (licht) */
  --bg: var(--creme);
  --fg: var(--inkt);
  --fg-zacht: #34383e;
  --grijs-tekst: var(--grijs);
  --lijn: var(--inkt);
  --haar: #cfccc0;
  --vlak: #ffffff;
  --vlak-2: #ecebe3;
  --accent-tekst: var(--koraal-tekst);
  --link: var(--inkt);
  --focus: var(--inkt);
  --focus-op-band: var(--limoen);
  --band: var(--donker);
  --op-band: var(--creme);
  --op-band-grijs: #b9bcb5;   /* 9,4:1 op de donkere band */
  --schaduw-brief: .5rem .5rem 0 var(--inkt);
  --knop-primair-bg: var(--inkt);
  --knop-primair-fg: var(--creme);

  /* Lettertypes (css/fonts.css levert Inter en Barlow Condensed) */
  --font-tekst: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-kop: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  --font-hand: Georgia, 'Iowan Old Style', 'Times New Roman', serif;

  /* Maten */
  --breed: 76rem;
  --smal: 46rem;
  --rand: max(1rem, env(safe-area-inset-left, 0px));
  --rand-r: max(1rem, env(safe-area-inset-right, 0px));
  --doel: 2.75rem;            /* minimaal aanraakdoel (44 px bij 16 px; bij 18 px basis ruim) */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111418;
    --fg: #f1f0e9;
    --fg-zacht: #d6d6ce;
    --grijs-tekst: #b0b3ad;   /* 7,8:1 op het donkere vlak */
    --lijn: #e9e8e0;
    --haar: #3a4144;
    --vlak: #1a1f22;
    --vlak-2: #22292d;
    --accent-tekst: #ff8e80;  /* 7,5:1 op het donkere vlak */
    --link: #f1f0e9;
    --focus: var(--limoen);
    --band: #0b0d0f;
    --schaduw-brief: .5rem .5rem 0 var(--limoen);
    --knop-primair-bg: var(--creme);
    --knop-primair-fg: var(--inkt);
    color-scheme: dark;
  }
}