/* Eyefly Cockpit — design-token-laag (single source of truth).
   Geladen VÓÓR cockpit.css. Kleuren blijven in cockpit.css (:root); hier staan de
   ontbrekende schalen: spacing, radius, elevatie, z-index, containerbreedtes, scrim.
   Componenten verwijzen naar deze tokens i.p.v. losse hardcoded waarden, zodat de
   look centraal te sturen is en consistent blijft (premium-SaaS-uitstraling). */
:root{
  /* Spacing — 4px-ritme (paddings/margins/gaps) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;

  /* Radius — strakke, moderne schaal (18 losse waarden → 6 + pill) */
  --r-xs:6px;   /* kleine tags/chips        */
  --r-sm:8px;   /* knoppen, inputs, blokken */
  --r-md:10px;  /* subkaarten, inputs groot */
  --r-lg:12px;  /* kaarten, panelen         */
  --r-xl:14px;  /* grote kaarten/panelen    */
  --r-2xl:16px; /* modals/sheets            */
  --r-pill:999px;

  /* Elevatie — crispe, donker-passende diepte-schaal met subtiele inset-hairline ("glas") */
  --e-1:0 1px 0 rgba(255,255,255,.04) inset, 0 12px 28px -20px rgba(0,0,0,.7);   /* kaarten            */
  --e-2:0 1px 0 rgba(255,255,255,.05) inset, 0 16px 40px -18px rgba(0,0,0,.78);  /* dropdowns/popovers */
  --e-3:0 1px 0 rgba(255,255,255,.06) inset, 0 40px 90px -30px rgba(0,0,0,.9);   /* modals             */

  /* z-index — één stapelschaal (was los: 60/80/90/120/200/…) */
  --z-base:1; --z-sticky:20; --z-header:40; --z-dropdown:100;
  /* --z-dialoog boven --z-modal: een bevestiging (bevestig/meld) wordt vanuit een open modal
     aangeroepen en moet dáárbovenop landen — op de oude --z-overlay (1000) verdween hij achter
     het venster dat hem opende (verlofvenster-les 21-07). */
  --z-overlay:1000; --z-modal:1010; --z-dialoog:1020; --z-toast:1100;

  /* Containerbreedtes — één ritme voor paginabreedte per view-type */
  --w-form:640px;   /* formulieren/instellingen   */
  --w-read:960px;   /* leesbare enkelkolom        */
  --w-page:1440px;  /* standaard content          */
  --w-wide:1600px;  /* data-zware views (planning/lijsten/dashboard) */

  /* Modal-scrim — één achtergrond voor alle sheets (was 5 verschillende) */
  --scrim:rgba(4,6,15,.82);

  /* Extra oppervlak boven --surface, voor geneste kaarten/hover (gelaagde diepte) */
  --surface-2:#242244;

  /* Type-schaal — de ~28 losse font-sizes (incl. halve-px) teruggebracht tot één ladder.
     nano/micro voor dichte data-labels; base=13 is de standaard body. */
  --fs-nano:8px; --fs-micro:9px; --fs-2xs:10px; --fs-xs:11px; --fs-sm:12px;
  --fs-base:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:18px; --fs-2xl:20px;
  --fs-3xl:22px; --fs-4xl:26px; --fs-hero:32px;
}