/* Alle kleuren, maten en tekstgroottes op één plek. Elders in css/ staan geen losse
   kleurwaarden: alleen var(--…). De CRM had alleen kleurtokens en daarnaast 129 losse
   hexwaarden (docs/plan/06-codestructuur.md §6).

   De kleuren van Whooler komen hier zodra ze er zijn (O47). Tot dan: de opbouw van de
   CRM die de klant in de demo zag, met een rustige groene accentkleur. Elke tekstkleur
   haalt minstens 4,5:1 op de achtergrond waar hij op staat. */

:root {
  /* Vlakken */
  --kleur-canvas: #eef1f4;
  --kleur-vlak: #ffffff;
  --kleur-vlak-zacht: #f6f8fa;
  --kleur-zijbalk: #2f3437;
  --kleur-zijbalk-actief: #465055;

  /* Tekst */
  --kleur-tekst: #23282b;
  --kleur-tekst-zacht: #4a5358;
  --kleur-tekst-gedempt: #5d676d;       /* 5,4:1 op wit, 4,9:1 op het canvas */
  --kleur-tekst-zijbalk: #d9dee1;
  --kleur-tekst-op-accent: #ffffff;

  /* Accent en signalen */
  --kleur-accent: #2e6a4f;              /* 6,5:1 met wit */
  --kleur-accent-donker: #245540;
  --kleur-accent-zacht: #e3efe8;
  --kleur-goed: #1f6b45;
  --kleur-goed-zacht: #dff0e6;
  --kleur-waarschuwing: #7a4d00;
  --kleur-waarschuwing-zacht: #fbecd0;
  --kleur-gevaar: #b3261e;
  --kleur-gevaar-zacht: #fbe3e1;
  --kleur-info: #1d5a8c;
  --kleur-info-zacht: #e1edf7;

  /* De vier soorten artikel: elk een eigen kleur, zodat een onderdeel, een sub-assemblage,
     een eindproduct en arbeid er nergens hetzelfde uitzien. Elke tekstkleur haalt minstens
     5,5:1 op zijn eigen zachte vlak. */
  --kleur-onderdeel: #2f5d8a;
  --kleur-onderdeel-zacht: #e4edf6;
  --kleur-subassemblage: #6a3d8f;
  --kleur-subassemblage-zacht: #efe7f5;
  --kleur-eindproduct: #2e6a4f;
  --kleur-eindproduct-zacht: #e3efe8;
  --kleur-arbeid: #8a3b12;
  --kleur-arbeid-zacht: #f8e7dd;

  /* Lijnen en focus */
  --kleur-rand: #d3d9dd;
  --kleur-rand-zacht: #e5e9ec;
  --kleur-focus: #1d5a8c;
  --kleur-sluier: rgb(35 40 43 / 45%);  /* achter een venster of het menu op een telefoon */

  /* Ruimte: steeds 4px erbij, daarna groter */
  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 12px;
  --ruimte-4: 16px;
  --ruimte-5: 20px;
  --ruimte-6: 24px;
  --ruimte-7: 32px;
  --ruimte-8: 48px;

  /* Tekst */
  --letter: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --letter-code: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --tekst-klein: 12px;
  --tekst-normaal: 14px;
  --tekst-groot: 16px;
  --tekst-kop: 20px;
  --tekst-titel: 24px;

  /* Vormen */
  --radius-klein: 4px;
  --radius: 8px;
  --radius-groot: 12px;
  --schaduw-klein: 0 1px 2px rgb(35 40 43 / 6%);
  --schaduw: 0 4px 12px rgb(35 40 43 / 10%);
  --schaduw-groot: 0 16px 40px rgb(35 40 43 / 18%);

  /* Maten van de schil. De velden links op een detailpagina groeien mee op een groot scherm,
     tot een label-waarderij niet meer leest als één rij. */
  --breedte-zijbalk: 84px;
  --breedte-menu: min(280px, 85vw);     /* de zijbalk als menu op een telefoon */
  --hoogte-bovenbalk: 56px;
  --breedte-detail-links: clamp(360px, 22vw, 480px);
  --klikdoel: 44px;                      /* docs/plan/03-schermen.md: minstens 44px */
}