/* ══════════════════════════════════════════════════════════════════════════
   LabelLogisch — het merkpalet
   --------------------------------------------------------------------------

   Eén bestand, twee schillen. `site.css` (publiek) en `admin.css` (beheer)
   houden hun eigen componenten, maar halen hun kleur hiervandaan. Een tweede
   plek met een eigen groen is per definitie een afwijking, want er is er maar
   één die klopt.

   ## Waar deze waarden vandaan komen

   Niet geschat. Ze zijn geteld in LabelLogisch 1.0 (`/Users/floor/Projects/
   labellogisch`), dat op Tailwind draait met `brand: colors.green` in
   `tmp_tailwind/tailwind.config.js`. De merkschaal ís daarmee de standaard
   groenschaal van Tailwind, en de vindplaatsen bevestigen dat:

     #166534  green-800  de canonieke merkkleur — `<meta name="theme-color">`
                         in index.html en de badge in assets/favicon-ll.svg
     #15803d  green-700  77 vindplaatsen; het groen van knoppen en links
     #16a34a  green-600  de lichtere hoverstand
     #22c55e  green-500  39 vindplaatsen; helder accent
     #4ade80  green-400  25 vindplaatsen
     #86efac  green-300  het accent op een donker vlak
     #bbf7d0  green-200  randen op een groen vlak
     #dcfce7  green-100  gevulde chip
     #f0fdf4  green-50   het lichtste vlak

   Twee tinten staan niet in Tailwind maar wel in V1, en die winnen daarom van
   de Tailwind-waarde: `#0e1f14` (28×) en `#14532d` (green-900, 4×). `#0e1f14`
   is het donkerste vlak van V1 en niet Tailwinds `#052e16`.

   Bewust géén merkkleur: `#25d366` (WhatsApp), `#4285f4`/`#ea4335`/`#fbbc05`/
   `#34a853` (het Google-logo) en `#26a9e0`/`#131e43`/`#b2d235` (partnerlogo's).
   Die horen bij een ander merk en mogen nooit als accent worden hergebruikt.

   ## De rolverdeling

   Groen is de merk- én actiekleur: primaire knoppen, actieve navigatie, links,
   geselecteerde keuzes, voortgang, succes, prijs, focus.

   Amber is géén accent. Hij staat hier uitsluitend voor een echte waarschuwing
   — actie vereist, een concept, ontbrekende configuratie, een externe bron die
   zijn antwoord niet zeker weet. Rood is fout, blokkade, annulering en
   definitief verwijderen. Groen mag een fout nooit vriendelijker maken.

   ## Contrast

   Op wit haalt elke tekstkleur hieronder minstens 4,5:1 (narekenbaar met de
   WCAG-formule; deze getallen zijn berekend, niet overgeschreven):
     --ll-green-700 op wit   5,0:1      --ll-ink op wit      17,7:1
     --ll-green-800 op wit   7,1:1      --ll-muted op wit     4,8:1
     --ll-danger    op wit   6,6:1      --ll-warning op wit   7,1:1
   Wit op `--ll-green-700` is 5,0:1 en op `--ll-green-800` 7,1:1; dat is de
   ondergrens voor de gevulde knop en die haalt hij ruim.

   `--ll-green-600` is met 3,3:1 op wit **geen tekstkleur**. Hij is de hoverstand
   van een gevuld vlak en een icoonkleur, niet meer.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── De merkschaal ─────────────────────────────────────────────────────── */
  --ll-green-950: #0e1f14;
  --ll-green-900: #14532d;
  --ll-green-800: #166534;
  --ll-green-700: #15803d;
  --ll-green-600: #16a34a;
  --ll-green-500: #22c55e;
  --ll-green-400: #4ade80;
  --ll-green-300: #86efac;
  --ll-green-200: #bbf7d0;
  --ll-green-100: #dcfce7;
  --ll-green-50:  #f0fdf4;

  /* ── Tekst, lijn en vlak ───────────────────────────────────────────────── */
  --ll-ink:     #111827;   /* V1 gray-900, 69 vindplaatsen */
  --ll-muted:   #6b7280;   /* V1 gray-500, 78 vindplaatsen */
  --ll-border:  #e5e7eb;   /* V1 gray-200, 38 vindplaatsen */
  --ll-surface: #ffffff;
  --ll-page:    #f9fafb;   /* V1 gray-50 — de pagina onder de kaarten */

  /* Een vlak dat rustiger is dan wit maar niet de pagina zelf: een ingeklapte
     rij, een tabelkop, een kaart die op de achtergrond hoort te staan. */
  --ll-surface-subtle: #f3f4f6;  /* V1 gray-100 */

  /* Twee tussenstanden die de componenten nodig hebben en die V1 ook voert. */
  --ll-ink-2:        #374151;  /* V1 gray-700, lopende tekst */
  --ll-border-strong:#d1d5db;  /* V1 gray-300, de rand van een invoerveld */
  --ll-on-dark:      #eef5f0;  /* tekst op een donkergroen vlak */

  /* ── Betekenis ─────────────────────────────────────────────────────────── */

  /* Succes is de merkkleur; dat is geen toeval maar het uitgangspunt. */
  --ll-success:      #166534;
  --ll-success-soft: #f0fdf4;
  --ll-success-line: #bbf7d0;

  /* Waarschuwing. `#92400e` is de tekstkleur die V1 al voert; `#b45309` en
     lichter halen op wit geen 4,5:1 en zijn daarom geen optie. */
  --ll-warning:      #92400e;
  --ll-warning-soft: #fffbeb;
  --ll-warning-line: #fde68a;

  /* Fout. Niet V1's `#ef4444`: die haalt op wit 3,8:1 en is dus geen
     tekstkleur voor een foutmelding — precies de plek waar leesbaarheid het
     meest telt. `#b42318` is de donkere variant die de admin al voert. */
  --ll-danger:      #b42318;
  --ll-danger-soft: #fef3f2;
  --ll-danger-line: #fecdca;

  /* Informatie. De enige niet-groene, niet-semantische kleur in het systeem, en
     hij bestaat alleen omdat een integratiestatus "onbekend" moet kunnen zijn
     zonder dat dat als fout of als waarschuwing leest. */
  --ll-info:      #1e4f8a;
  --ll-info-soft: #eff6ff;
  --ll-info-line: #bfdbfe;

  --ll-neutral:      #6b7280;
  --ll-neutral-soft: #f9fafb;
  --ll-neutral-line: #e5e7eb;

  /* ── Focus ─────────────────────────────────────────────────────────────── */

  /* Eén ring voor beide schillen. Groen met een offset: op wit is de ring zelf
     zichtbaar, en op een groene knop is de offset de witte scheiding die hem
     losmaakt van het vlak eronder. Op een donkergroen vlak wint wit; zie
     `--ll-focus-on-dark`. */
  --ll-focus:         var(--ll-green-700);
  --ll-focus-on-dark: #ffffff;
  --ll-focus-width:   3px;
  --ll-focus-offset:  2px;

  /* ── Aanraakmaat ───────────────────────────────────────────────────────── */
  /* De ondergrens uit de opdracht, en de reden dat knoppen en velden in beide
     schillen dezelfde hoogte hebben. */
  --ll-tap: 44px;
}