/* Copyright (c) 2026 Rajesh Krishnasing. Alle rechten voorbehouden. */
/* PrimaPress, voorkant: de tokens van het designsysteem (docs/DESIGNSYSTEEM.md, hoofdstuk 4 en 9).
 * Dit is de enige plek in static/ (buiten de modules) met een kleurcode, een verloop of een maat van een kleur.
 * Drie lagen:
 *   laag 1, grondstoffen: de kleurtreden (--pp-navy-700 en dergelijke). Een component gebruikt ze niet.
 *   laag 2, betekenis: wat een kleur doet (--pp-vlak, --pp-tekst, --pp-accent). Licht en donker hebben dezelfde namen.
 *   laag 3, per component: maten en vlakken die alleen een component nodig heeft; ze wijzen naar laag 2.
 * Als laatste blok de 37 oude namen van app.css (tot en met 1.2.1), als verwijzing naar de nieuwe tokens, zodat de
 * modules meebewegen zonder dat hun stijlblad verandert.
 * Herkomst van elke waarde en het contrast per paar: docs/DESIGNSYSTEEM.md. Geen lettertypen of bestanden van buiten. */

:root {
  color-scheme: light;

  /* ------------------------------------------------------------ laag 1: grondstoffen */

  /* navy: het merkblauw #143C6E (besluit 24-09-2026) is trede 700; Xerox meet #003870 (02-10-2026) */
  --pp-navy-950: #060D18;
  --pp-navy-900: #0B1F3A;
  --pp-navy-800: #12294B;
  --pp-navy-700: #143C6E;
  --pp-navy-600: #1D4F8C;
  --pp-navy-500: #2F68AD;
  --pp-navy-300: #8FB0D6;
  --pp-navy-200: #C5D5E8;
  --pp-navy-100: #DDE7F3;
  --pp-navy-50: #EEF3F9;

  /* rood: het merkrood #D71920 is trede 600; 700 en 800 zijn de treden die Xerox meet voor hover en ingedrukt */
  --pp-rood-800: #7E000B;
  --pp-rood-700: #BB0112;
  --pp-rood-600: #D71920;
  --pp-rood-100: #F9D2D4;
  --pp-rood-50: #FDECEC;

  /* neutraal: de lichtheid van de grijzen van Xerox (#F8F8F8 tot #333333), een fractie naar navy gekleurd */
  --pp-grijs-0: #FFFFFF;
  --pp-grijs-50: #F4F6F9;
  --pp-grijs-100: #ECEFF4;
  --pp-grijs-200: #DFE4EB;
  --pp-grijs-300: #C9D0DA;
  --pp-grijs-400: #7F8A9B;
  --pp-grijs-500: #6B7585;
  --pp-grijs-600: #5E6878;
  --pp-grijs-700: #465163;
  --pp-grijs-800: #2A3443;
  --pp-grijs-900: #16202E;

  /* blauw voor links en de focusring: Xerox #1A6FC5 (gemeten); 700 is de donkerdere trede voor tekst op een vlak */
  --pp-blauw-600: #1A6FC5;
  --pp-blauw-700: #155FA9;

  /* ------------------------------------------------------------ laag 2: betekenis (licht) */

  /* de schil: altijd navy, ook in de lichte modus */
  --pp-schil: var(--pp-navy-900);
  --pp-schil-2: #1A3358;                       /* het gekozen gebied in de navigatie */
  --pp-schil-hover: rgba(255, 255, 255, .06);
  --pp-schil-rand: rgba(255, 255, 255, .14);
  --pp-schil-tekst: #FFFFFF;
  --pp-schil-tekst-2: #B4C2D6;

  /* het werkblad en de vlakken */
  --pp-canvas: var(--pp-grijs-50);
  --pp-vlak: var(--pp-grijs-0);
  --pp-vlak-2: var(--pp-grijs-100);            /* verzonken: tabelkop, zoekbalk, voet van een venster */
  --pp-vlak-hover: var(--pp-navy-50);
  --pp-rand: var(--pp-grijs-200);
  --pp-rand-zacht: var(--pp-grijs-100);
  --pp-rand-sterk: var(--pp-grijs-300);
  --pp-invoer-rand: var(--pp-grijs-400);       /* 3,4:1 op wit: de rand van een invoerveld is zelf te zien */

  /* tekst */
  --pp-tekst: var(--pp-grijs-900);
  --pp-tekst-2: var(--pp-grijs-700);
  --pp-tekst-3: var(--pp-grijs-600);
  --pp-kop: var(--pp-navy-700);
  --pp-link: var(--pp-blauw-700);
  --pp-focus: var(--pp-blauw-600);

  /* accent en actie: rood */
  --pp-accent: var(--pp-rood-600);
  --pp-accent-hover: var(--pp-rood-700);
  --pp-accent-actief: var(--pp-rood-800);
  --pp-op-accent: #FFFFFF;
  --pp-accent-tekst: var(--pp-rood-600);       /* rood als tekst (een kerncijfer dat aandacht vraagt) */

  /* de tweede actie (Nieuw) en de gekozen regel: navy */
  --pp-navy: var(--pp-navy-700);
  --pp-navy-hover: var(--pp-navy-600);
  --pp-op-navy: #FFFFFF;
  --pp-gekozen-vlak: var(--pp-navy-700);
  --pp-gekozen-tekst: #FFFFFF;

  /* status: tekst, vlak en rand per soort */
  --pp-ok-tekst: #176A00;
  --pp-ok-vlak: #E8F4E5;
  --pp-ok-rand: #B5D9AD;
  --pp-ok-vol: #176A00;
  --pp-let-tekst: #8A4700;
  --pp-let-vlak: #FFF1DF;
  --pp-let-rand: #F2CC98;
  --pp-info-tekst: #0053A7;
  --pp-info-vlak: #E7F0FA;
  --pp-info-rand: #B9D3EF;
  --pp-fout-tekst: #A50E18;
  --pp-fout-vlak: var(--pp-rood-50);
  --pp-fout-rand: #F2B8BB;
  --pp-portaal-tekst: #860A6D;
  --pp-portaal-vlak: #F7E9F3;
  --pp-portaal-rand: #E3BAD8;
  --pp-neutraal-tekst: var(--pp-grijs-700);
  --pp-neutraal-vlak: var(--pp-grijs-100);
  --pp-neutraal-rand: var(--pp-grijs-300);
  --pp-live: #3DDC84;                          /* de stip van de live stand (geen tekstkleur) */
  --pp-wacht: #FFB020;

  /* ------------------------------------------------------------ letter */

  --pp-letter: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --pp-letter-kop: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --pp-letter-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, Menlo, monospace;
  --pp-maat-xs: .6875rem;      /* 11 px: merkjes, toetsen, het soortlabel boven een titel */
  --pp-maat-s: .75rem;         /* 12 px: uitleg, tabelkop */
  --pp-maat-m: .8125rem;       /* 13 px: tabellen, knoppen, velden */
  --pp-maat-basis: .875rem;    /* 14 px: lopende tekst */
  --pp-maat-l: 1rem;           /* 16 px: titel van een venster in een laag */
  --pp-maat-xl: 1.25rem;       /* 20 px: titel van een scherm */
  --pp-maat-2xl: 1.5rem;       /* 24 px: begroeting */
  --pp-maat-3xl: 1.875rem;     /* 30 px: een kerncijfer */
  --pp-regel: 1.45;
  --pp-regel-kop: 1.2;
  --pp-gewicht: 400;
  --pp-gewicht-half: 600;
  --pp-gewicht-vet: 700;

  /* ------------------------------------------------------------ maat (raster van 4 px) */

  --pp-r-1: 4px;
  --pp-r-2: 8px;
  --pp-r-3: 12px;
  --pp-r-4: 16px;
  --pp-r-5: 20px;
  --pp-r-6: 24px;
  --pp-r-8: 32px;
  --pp-r-10: 40px;
  --pp-r-12: 48px;
  --pp-rail: 236px;            /* de navigatie links */
  --pp-rail-smal: 64px;
  --pp-balk: 56px;             /* de bovenbalk: het logo 26 px met rondom minstens een tegel (12 px) vrij */
  --pp-hoogte-knop: 32px;
  --pp-hoogte-veld: 32px;
  --pp-hoogte-rij: 36px;

  /* ------------------------------------------------------------ afronding (Xerox meet 9, 10 en 12 px) */

  --pp-straal-s: 6px;          /* invoervelden, toetsen */
  --pp-straal-m: 9px;          /* knoppen, meldingen, zoekbalk */
  --pp-straal-l: 12px;         /* kaarten en schermen */
  --pp-straal-xl: 16px;        /* de hoek van het werkblad in de schil, lagen */
  --pp-straal-rond: 999px;     /* merkjes, de stip, de bol met initialen */

  /* ------------------------------------------------------------ schaduw (Xerox is vlak: alleen wat zweeft) */

  --pp-schaduw-1: 0 1px 2px rgba(11, 31, 58, .06);
  --pp-schaduw-2: 0 8px 24px -6px rgba(11, 31, 58, .18), 0 2px 6px rgba(11, 31, 58, .08);
  --pp-schaduw-3: 0 28px 72px -16px rgba(6, 13, 24, .5), 0 8px 20px rgba(6, 13, 24, .18);
  --pp-ring: 0 0 0 2px var(--pp-vlak), 0 0 0 4px var(--pp-focus);
  --pp-ring-schil: 0 0 0 2px var(--pp-schil), 0 0 0 4px #FFFFFF;

  /* ------------------------------------------------------------ beweging */

  --pp-duur-1: 120ms;          /* hover, indrukken */
  --pp-duur-2: 180ms;          /* een laag of het palet verschijnt */
  --pp-duur-3: 260ms;          /* de navigatie schuift */
  --pp-gang: cubic-bezier(.2, .8, .2, 1);
}

/* ---------------------------------------------------------------- laag 2: betekenis (donker)
 * Twee keer dezelfde waarden: de keuze van de gebruiker (data-thema) en de voorkeur van het systeem. */

:root[data-thema="donker"] {
  color-scheme: dark;
  --pp-schil: var(--pp-navy-950);
  --pp-schil-2: #15253E;
  --pp-canvas: #0A1322;
  --pp-vlak: #111C2E;
  --pp-vlak-2: #17243A;
  --pp-vlak-hover: #1E2B40;
  --pp-rand: #25344C;
  --pp-rand-zacht: #1B2940;
  --pp-rand-sterk: #344661;
  --pp-invoer-rand: #6C7F9E;
  --pp-tekst: #E8EDF5;
  --pp-tekst-2: #B3BFD1;
  --pp-tekst-3: #8E9BB0;
  --pp-kop: #FFFFFF;
  --pp-link: #6FB1F5;
  --pp-focus: #6FB1F5;
  --pp-accent-tekst: #FF8A87;
  --pp-navy: var(--pp-navy-600);
  --pp-navy-hover: var(--pp-navy-500);
  --pp-gekozen-vlak: var(--pp-navy-600);
  --pp-ok-tekst: #7BD88F;
  --pp-ok-vlak: #12301E;
  --pp-ok-rand: #1F5233;
  --pp-ok-vol: #176A00;
  --pp-let-tekst: #FFC37A;
  --pp-let-vlak: #3A2810;
  --pp-let-rand: #6B4A1C;
  --pp-info-tekst: #9CC8F7;
  --pp-info-vlak: #122B4A;
  --pp-info-rand: #1F4878;
  --pp-fout-tekst: #FFB3B0;
  --pp-fout-vlak: #3A1519;
  --pp-fout-rand: #74282E;
  --pp-portaal-tekst: #F0A5DC;
  --pp-portaal-vlak: #3A1533;
  --pp-portaal-rand: #6E2A61;
  --pp-neutraal-tekst: #B3BFD1;
  --pp-neutraal-vlak: #1E2B40;
  --pp-neutraal-rand: #344661;
  --pp-schaduw-1: 0 1px 2px rgba(0, 0, 0, .4);
  --pp-schaduw-2: 0 10px 28px -6px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .35);
  --pp-schaduw-3: 0 28px 72px -16px rgba(0, 0, 0, .75), 0 8px 20px rgba(0, 0, 0, .4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    color-scheme: dark;
    --pp-schil: var(--pp-navy-950);
    --pp-schil-2: #15253E;
    --pp-canvas: #0A1322;
    --pp-vlak: #111C2E;
    --pp-vlak-2: #17243A;
    --pp-vlak-hover: #1E2B40;
    --pp-rand: #25344C;
    --pp-rand-zacht: #1B2940;
    --pp-rand-sterk: #344661;
    --pp-invoer-rand: #6C7F9E;
    --pp-tekst: #E8EDF5;
    --pp-tekst-2: #B3BFD1;
    --pp-tekst-3: #8E9BB0;
    --pp-kop: #FFFFFF;
    --pp-link: #6FB1F5;
    --pp-focus: #6FB1F5;
    --pp-accent-tekst: #FF8A87;
    --pp-navy: var(--pp-navy-600);
    --pp-navy-hover: var(--pp-navy-500);
    --pp-gekozen-vlak: var(--pp-navy-600);
    --pp-ok-tekst: #7BD88F;
    --pp-ok-vlak: #12301E;
    --pp-ok-rand: #1F5233;
    --pp-ok-vol: #176A00;
    --pp-let-tekst: #FFC37A;
    --pp-let-vlak: #3A2810;
    --pp-let-rand: #6B4A1C;
    --pp-info-tekst: #9CC8F7;
    --pp-info-vlak: #122B4A;
    --pp-info-rand: #1F4878;
    --pp-fout-tekst: #FFB3B0;
    --pp-fout-vlak: #3A1519;
    --pp-fout-rand: #74282E;
    --pp-portaal-tekst: #F0A5DC;
    --pp-portaal-vlak: #3A1533;
    --pp-portaal-rand: #6E2A61;
    --pp-neutraal-tekst: #B3BFD1;
    --pp-neutraal-vlak: #1E2B40;
    --pp-neutraal-rand: #344661;
    --pp-schaduw-1: 0 1px 2px rgba(0, 0, 0, .4);
    --pp-schaduw-2: 0 10px 28px -6px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .35);
    --pp-schaduw-3: 0 28px 72px -16px rgba(0, 0, 0, .75), 0 8px 20px rgba(0, 0, 0, .4);
  }
}

/* ---------------------------------------------------------------- minder beweging */

@media (prefers-reduced-motion: reduce) {
  :root {
    --pp-duur-1: 1ms;
    --pp-duur-2: 1ms;
    --pp-duur-3: 1ms;
  }
}

/* ---------------------------------------------------------------- laag 3: per component
 * Wat alleen een component nodig heeft. Wijst naar laag 2 (en volgt dus vanzelf de donkere modus), behalve wat
 * altijd hetzelfde blijft: wit op de navy schil en op een vol gekleurde knop, de sluier achter een laag, en papier
 * (het voorbeeld van een klantdocument is ook in de donkere modus wit). */

:root {
  /* vaste maten van de componenten */
  --pp-knop-hoogte: var(--pp-hoogte-knop);
  --pp-knop-straal: var(--pp-straal-m);
  --pp-veld-hoogte: var(--pp-hoogte-veld);
  --pp-veld-straal: var(--pp-straal-s);
  --pp-rij-hoogte: var(--pp-hoogte-rij);
  --pp-kaart-straal: var(--pp-straal-l);
  --pp-venster-straal: var(--pp-straal-xl);
  --pp-merkje-straal: var(--pp-straal-rond);
  --pp-toets-straal: 5px;
  --pp-icoon: 18px;
  --pp-icoon-klein: 14px;
  --pp-icoon-groot: 24px;
  --pp-tellergrootte: 10.5px;                  /* het getal in een teller en het merkje volgt */
  --pp-lijn: 1px;                              /* een lijn: de tijdlijn, een scheiding (samenvoegen 09-10-2026, W8-ui) */
  --pp-lijn-dik: 2px;                          /* een dikke lijn: de lijn tussen de stappen */
  /* de vaste balken van een venster (optimalisatie 2.0, ONTW-01): zoveel laat de pagina vrij als een veld de focus krijgt
     (scroll-padding in app.css); een titelbalk op twee regels vangt kern.js op */
  --pp-titelbalk-hoogte: 76px;                 /* de titelbalk: soort en naam in twee regels, 12 px rondom */
  --pp-knoppenrij-hoogte: 53px;                /* de knoppenrij: een knop van 32 px, 10 px rondom en de lijn erboven */
  --pp-focus-marge: 8px;                       /* tussen een veld met de focus en de rand van een balk */

  /* wit: tekst op een vast gekleurd vlak (rood, navy, groen) en op de schil */
  --pp-wit: #FFFFFF;

  /* de schil: doorzichtig wit op navy (contrast nagerekend in contrast.py) */
  --pp-schil-toets-vlak: rgba(255, 255, 255, .08);
  --pp-schil-toets-rand: rgba(255, 255, 255, .2);
  --pp-schil-toets-rand-aan: rgba(255, 255, 255, .34);
  --pp-zoekstart-vlak: rgba(255, 255, 255, .06);
  --pp-zoekstart-vlak-hover: rgba(255, 255, 255, .1);
  --pp-zoekstart-rand-hover: rgba(255, 255, 255, .28);
  --pp-schil-teller-stil: rgba(255, 255, 255, .12);
  /* de afgeronde hoek van het werkblad onder de bovenbalk: navy buiten de boog, zodat de hoek blijft staan als de
     pagina eronder schuift (geen versiering: dezelfde vorm als de hoek van het werkblad zelf) */
  --pp-schil-hoek-vlak: radial-gradient(circle at 100% 100%, transparent calc(var(--pp-straal-xl) - .5px), var(--pp-schil) var(--pp-straal-xl));

  /* een toets (kbd) op een vol gekleurde knop of op de gekozen regel van het palet */
  --pp-op-vol-toets-vlak: rgba(255, 255, 255, .16);
  --pp-op-vol-toets-rand: rgba(255, 255, 255, .4);

  /* de knop gevaar-vol (definitief wissen) en het rode merk van het inlogpaneel */
  --pp-gevaar-vol: var(--pp-rood-800);
  --pp-merk-rood: var(--pp-rood-600);

  /* de sluier achter een laag (venster, palet, de la op een telefoon) */
  --pp-sluier: rgba(6, 13, 24, .56);
  --pp-sluier-vervaging: blur(2px);

  /* selectie van tekst, het lijntje van een kerncijfer, de stip als iets uit staat */
  --pp-selectie-vlak: var(--pp-navy-200);
  --pp-selectie-tekst: var(--pp-navy-900);
  --pp-telspoor: var(--pp-navy-300);
  --pp-stip-uit: var(--pp-grijs-400);

  /* zachte ringen om een veld met focus en om de stap van nu */
  --pp-ring-zacht: 0 0 0 3px color-mix(in srgb, var(--pp-focus) 28%, transparent);
  --pp-ring-accent: 0 0 0 3px color-mix(in srgb, var(--pp-accent) 22%, transparent);

  /* het skelet: de rustige glans van wat nog laadt (het enige verloop in de app, geen versiering) */
  --pp-skelet-glans: linear-gradient(90deg, var(--pp-vlak-2) 0%, var(--pp-rand) 45%, var(--pp-vlak-2) 90%) 0 0 / 300% 100%;

  /* het inlogpaneel: navy, met het raster van punten van de Xerox-banner, heel zacht */
  --pp-inlog-vlak: var(--pp-navy-900);
  --pp-inlog-punten: radial-gradient(circle, rgba(255, 255, 255, .2) 1.2px, transparent 1.7px) 0 0 / 28px 28px;
  --pp-inlog-masker: linear-gradient(135deg, transparent 25%, #000000 100%);

  /* papier: het voorbeeld van een klantdocument (de brief, het blad in het printvenster, de conceptmail). Een
     klantdocument heeft zijn eigen opmaak en blijft wit, ook in de donkere modus. */
  --pp-papier: #FFFFFF;
  --pp-papier-tekst: #000000;
  --pp-papier-link: #0000FF;
  --pp-papier-grijs: #999999;
  --pp-papier-mail: #222222;
  --pp-papier-onder: #E9EEF2;                  /* de tafel onder het voorbeeld van de brief */
  --pp-papier-schaduw: 0 2px 10px rgba(20, 60, 110, .18);
  --pp-papier-lijn: #DFE4EB;
  --pp-papier-kop: #C9D0DA;
  --pp-papier-titel: #5E6878;
  --pp-papier-tabel: #ECEFF4;
  --pp-print-rand: #999999;                    /* printen van een scherm: de lijn onder de titel */
}

/* ---------------------------------------------------------------- de oude namen (app.css tot en met 1.2.1)
 * De 29 modules gebruiken deze namen. Ze blijven bestaan en wijzen naar de nieuwe tokens, zodat een module
 * meebeweegt zonder dat haar eigen stylesheet verandert. De overgangstabel staat in docs/DESIGNSYSTEEM.md.
 *
 * De signaalkleuren van 24-09-2026 (uit het Prindustry-beheer) veranderen mee naar de statuskleuren hierboven
 * (besluit B-01 in docs/BESLUITEN.md, dat het werkbesluit van de hoofdarchitect van 03-10-2026 vastlegt). Terugdraaien is
 * deze tien regels terugzetten in plaats van de verwijzingen hieronder:
 *   --groen-tekst: #006356;  --groen-vlak: #CCF2ED;  --oranje: #FF9800;     --rood: #F44336;       --rood-tekst: #C62828;
 *   --geel-tekst: #9A7B00;   --geel-vlak: #FDF6DD;   --blauw-tekst: #1466B8; --blauw-vlak: #E3EEFB; --licht: #007BC7; */

:root {
  --merk-rood: var(--pp-rood-600);
  --merk-donkergrijs: var(--pp-tekst);
  --merk-grijs: var(--pp-tekst-3);
  --merk-blauw: var(--pp-navy-700);
  --merk-wit: #FFFFFF;
  --blauw: var(--pp-kop);
  --blauw-donker: var(--pp-navy-800);
  --licht: var(--pp-link);
  --gradient: var(--pp-navy);
  --gradient-donker: var(--pp-navy-hover);
  --gradient-balk: var(--pp-schil);
  --tekst: var(--pp-tekst-2);
  --tekst-donker: var(--pp-tekst);
  --sub: var(--pp-tekst-3);
  --sub2: var(--pp-rand-sterk);
  --wit: var(--pp-vlak);
  --vlak: var(--pp-canvas);
  --vlak2: var(--pp-vlak-2);
  --rand: var(--pp-rand);
  --rand-tabel: var(--pp-rand);
  --rand-zacht: var(--pp-rand-zacht);
  --invoer-rand: var(--pp-invoer-rand);
  --cyaan: var(--pp-rand-sterk);
  --oranje: var(--pp-navy);
  --rood: var(--pp-fout-tekst);
  --rood-tekst: var(--pp-fout-tekst);
  --rood-vlak: var(--pp-fout-vlak);
  --xerox-rood: var(--pp-rood-600);
  --groen-tekst: var(--pp-ok-tekst);
  --groen-vlak: var(--pp-ok-vlak);
  --geel-tekst: var(--pp-let-tekst);
  --geel-vlak: var(--pp-let-vlak);
  --blauw-tekst: var(--pp-info-tekst);
  --blauw-vlak: var(--pp-info-vlak);
  --schaduw: var(--pp-schaduw-1);
  --focus: var(--pp-focus);
  --balk: var(--pp-balk);
}