/**
 * Poolster UI-systeem — Laag 1: design tokens.
 * Eén bron voor kleur, radius, schaduw, spacing en type-schaal.
 * Bevat GEEN component-CSS — dat leeft in base.css (Laag 2) of components/pw-*.js (Laag 3).
 *
 * Herkomst: geëxtraheerd uit de :root-blokken van styleguide/index.html,
 * ui/owner-dashboard/index.html en ui/owner-login/index.html (2026-07-25) —
 * zie UI Design/03-UI Architectuur voor de volledige architectuurbeschrijving.
 *
 * Drie tokens hadden een bewust andere waarde specifiek in owner-login
 * (--shadow-sm, --shadow-lg, --radius-lg — dieper/ronder voor de losstaande
 * login-kaart op een donkere foto-achtergrond). Dat is hier NIET overschreven
 * met de gedeelde waarde: owner-login behoudt een kleine lokale :root-override
 * voor die drie, met een verwijzing naar deze toelichting.
 */
:root{
  /* Kleur — achtergrond & oppervlak */
  --color-bg:#F5F8FB;
  --color-surface:#FFFFFF;
  --color-surface-alt:#EDF2F7;
  --color-border:#DCE4EC;

  /* Kleur — tekst */
  --color-text:#16232F;
  --color-text-muted:#5B6B7A;

  /* Kleur — merk */
  --color-primary:#1D3557;
  --color-primary-hover:#16283F;
  --color-primary-contrast:#FFFFFF;
  --color-accent:#F4B942;
  --color-accent-contrast:#16232F;

  /* Kleur — status */
  --color-success:#2A9D6F;
  --color-success-bg:#E4F5EE;
  --color-warning:#B9791F;
  --color-warning-bg:#FBF0DD;
  --color-danger:#C6433D;
  --color-danger-bg:#FBE9E8;
  --color-info:#2A6F97;
  --color-info-bg:#E6F1F7;

  /* Kleur — status, tekst- en randvariant.
     Toegevoegd 2026-07-26. De vier .alert-varianten gebruikten wél een token voor
     de achtergrond maar 8× een rauwe hex voor color/border-color ernaast — dat
     waren 8 van de 16 openstaande R-001-Stylelintbevindingen. Nu getokeniseerd. */
  --color-success-text:#1D6B4D;
  --color-success-border:#C3E8D8;
  --color-warning-text:#8A5C14;
  --color-warning-border:#F0DDB2;
  --color-danger-text:#8F2E29;
  --color-danger-border:#F0C6C3;
  --color-danger-hover:#A9362F;
  --color-info-text:#1C4F6B;
  --color-info-border:#C7DFEC;

  /* Kleur — op donkere achtergrond (hero, topbar, scrim).
     --color-on-dark stond rauw als #C9D8E6 in drie bestanden; was de overige
     R-001-bevinding naast de acht hierboven. */
  --color-on-dark:#C9D8E6;
  --color-skeleton-highlight:#E2E9F0;

  /* Vorm */
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-full:999px;

  /* Elevatie */
  --shadow-sm:0 1px 2px rgba(22,35,47,.06), 0 1px 1px rgba(22,35,47,.04);
  --shadow-md:0 6px 16px rgba(22,35,47,.10);
  --shadow-lg:0 16px 40px rgba(22,35,47,.16);

  /* Type */
  --font-heading:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* Alias voor bestaande CSS die nog var(--font) gebruikt (owner-dashboard, owner-login) — zelfde waarde als --font-body. Nieuwe CSS gebruikt --font-heading/--font-body. */
  --font:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Ruimte */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
}

/**
 * BREEKPUNTEN — een afspraak, geen tokens.
 *
 * Deze drie waarden staan bewust níét als custom property hierboven: een
 * CSS-variabele werkt niet in een @media-vraag (`@media(max-width:var(--bp-m))`
 * doet niets, stil). Ze staan dus als vaste getallen in de media-queries van
 * base.css, components.css en styleguide.css, en dit blok is de enige plek waar
 * ze samen benoemd zijn. Gebruik géén vierde waarde zonder ze hier toe te voegen —
 * dat is precies hoe een systeem aan tien half-overlappende breekpunten komt.
 *
 *   1000px  raster verdicht: 4 of 6 kolommen worden 2
 *    860px  de zijbalk van UI-elementen klapt boven de inhoud
 *    640px  mobiel: tabellen stapelen tot kaartjes, rasters worden 1 kolom,
 *           het zijpaneel wordt schermbreed, paginamarges worden smaller
 *
 * Mobile-first of niet: de bestaande CSS is desktop-first geschreven
 * (max-width-queries die iets afpellen). Dat blijft zo tot een element opnieuw
 * gebouwd wordt — een omgekeerde min-width-schrijfwijze naast de bestaande zou
 * betekenen dat je bij elk element eerst moet uitzoeken welke van de twee er
 * geldt. Eén schrijfwijze per bestand is belangrijker dan de theoretisch betere.
 */