/* ======================================================================= De huisstijl van Lenselink (vastgezet 14-10-2026)
   Eén bron voor alle omgevingen: www, zaaglijst, Studio (werkplek en homepage), toelevering, productie en account.
   Dit bestand komt op elke pagina als eerste stylesheet (pages.ts docHead, www/planner.ts); de rest bouwt hierop voort.
   De regels en de keuzes staan in docs/STIJL.md; de voorbeeldpagina is /stijl (beheerders). tests/stijl.test.ts bewaakt
   dat er geen losse kleuren, ronde hoeken of eigen oranjes bij komen.
   - Hoekig en vlak: geen ronde hoeken, geen schaduwen op knoppen en kaarten. Alleen echte rondjes (statusstip,
     keuzerondje, avatar, schuifje) zijn rond, en in de Studio wat zwevend boven het 3D-beeld ligt (studio.css).
   - Navy voor tekst, kop en zijbalk; oranje alleen voor de ene hoofdactie en de plek waar u bent.
   - Inter voor tekst, JetBrains Mono voor kleine labels in hoofdletters, maten en codes. De h1 is overal dun (400).
   - Ook www volgt deze stijl (sinds 14-10-2026; daarvoor had www een eigen vormtaal). */
:root {
  /* kleuren */
  --lz-navy: #0D1E27; --lz-navy-2: #17313E; --lz-navy-3: #1E3F4F;
  --lz-oranje: #E8590C; --lz-oranje-2: #C94E09; --lz-oranje-tekst: #B23F00; --lz-oranje-licht: #FDEEE4; --lz-oranje-rand: #F7C9AC;
  --lz-tekst: #0D1E27; --lz-tekst-2: #3D5361; --lz-grijs: #61747F;
  --lz-rand: #D3D9DB; --lz-lijn: #E3E6E5; --lz-lijn-sterk: #A9B7BF;
  --lz-wit: #FFFFFF; --lz-vlak: #F3F5F7; --lz-vlak-2: #EEF1F2; --lz-werkvlak: #DDE3E6; /* onderkant van het 3D-werkvlak */
  --lz-navy-tekst: #C3CFD5; --lz-navy-zacht: #7F939D;   /* tekst en labels op navy (kop, zijbalk) */
  --lz-groen: #2F6B12; --lz-groen-licht: #EAF3DE; --lz-rood: #B3261E; --lz-rood-licht: #FBEAE8; --lz-blauw: #0E6A8F; --lz-blauw-licht: #E3F1F7;
  /* de omgevingen (streep in de wisselaar, tegels op de homepage) */
  --lz-zaaglijst: #4F93C8; --lz-toelevering: #F28A1E; --lz-studio: #E8590C; --lz-productie: #97C459;
  /* de drie routekaarten op de homepage van www: Zaaglijst, Toelevering, Interieurbouw (Beau, 14-10) */
  --lz-route-zaaglijst: #238CAD; --lz-route-toelevering: #FF6600; --lz-route-interieur: #0C303F;
  /* letters en maten */
  --lz-font: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lz-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --lz-breed: 1320px;      /* breedte van de inhoud, gecentreerd (alleen het planbord en de Studio-werkplek zijn breder) */
  --lz-kop: 52px;          /* hoogte van de kop in de werkschermen */
  --lz-veld: 40px; --lz-veld-sm: 32px; --lz-veld-lg: 48px;
}

/* ---------------------------------------------------------------- vorm: hoekig en vlak */
*, *::before, *::after { border-radius: 0 !important; }
/* echte rondjes */
input[type="radio"], .lz-rond, .status::before, .timeline li::before, .move-chip .dot, .live-dot, .lg-dot, .rp-xl i, .rv-av, .vr-badge i,
.st-sw::after, .tchip.is-has::after, .tchip.is-voorraad::after, .pr-dot, .ws-avatar, .hs-stip, .mu-pt,
.tl-dot, .tl-todo-big::before, .ord-chip i, .ord-warn li::before, .tlf-label i { border-radius: 50% !important; }
/* schuifje: de baan is een pil (de knop erin staat hierboven bij de rondjes) */
.st-sw { border-radius: 999px !important; }
:is(.btn, .btn-ghost, .btn-outline, .card, .chip-light) { box-shadow: none; }
.seg input:checked + span { box-shadow: inset 0 0 0 1px var(--lz-rand); } /* gekozen deel: een lijn, geen schaduw */

/* ---------------------------------------------------------------- letters: grote koppen dun (Beau, 14-10), kleine koppen vet
   Dun: de h1 en de grote sectiekoppen (h-xl, h-lg, vid-h, de h2 op www en op de homepage van de Studio). Vet blijven de
   kleine koppen in de werkschermen; kaarttitels en h3 op de publieke pagina's halfvet (600). */
h1, .h-xl, .h-lg, .vid-h, .pl h2, .www main h2:not(:is(.kast-tile-body, .lp-type-body, .post-card, .tile) h2) { font-weight: 400 !important; letter-spacing: -.01em; }
/* kaarttitels op de publieke pagina's (www, zaaglijst, homepage van de Studio) halfvet: zachter naast de dunne koppen; ook
   de titels van de berichten in de blog (Beau, 15-10: "te dik"), het grote uitgelichte bericht dun zoals de grote koppen */
:is(body.www, body.zl, body.pl-page) main :is(h3, .kast-tile-body strong, .post-card-title) { font-weight: 600 !important; }
:is(body.www, body.zl, body.pl-page) main .post-card.is-feature .post-card-title { font-weight: 400 !important; }

/* ---------------------------------------------------------------- vaste onderdelen die overal hetzelfde zijn */
/* merk: het oranje blok met de L, een streep en de naam van de omgeving */
.lz-merk { display: inline-flex; align-items: center; gap: 16px; flex: none; color: inherit; text-decoration: none; }
.lz-merk img { display: block; width: 30px; height: 30px; }
.lz-merk span { padding-left: 16px; border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 30%, transparent); font-weight: 700; font-size: 15px; line-height: 22px; white-space: nowrap; letter-spacing: .01em; }
/* klein label in hoofdletters (boven een veld, een kolom of een blok) */
.lz-label { display: block; font: 500 11px/1.4 var(--lz-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lz-grijs); }