/* ============================================================
   LUX DESIGN TOKENS — lux-tokens.css
   Bron van waarheid voor alle kleuren, maten en fonts.
   Regels voor gebruik: zie DESIGN.md.
   - Gebruik ALTIJD var(--lux-*), nooit hardgecodeerde hex in UI-code.
   - Thema wisselen = data-theme attribuut op een voorouder-element
     (<html data-theme="light"> of een container).
   - .lux-root zonder attribuut = dark (default voor kaart-app).
   ============================================================ */

/* ---- Fonts — drie families, alle drie zelf gehost, geen CDN ----
   Herkomst, hashes en licenties: fonts/PROVENANCE.txt.
   De v1-namen (HOLONblock/HOLONline, bestanden HolonBLOCK.otf 16.960 B /
   HOLONline.otf 35.956 B) zijn op 11-8-2026 ingetrokken. Gemeten met fontTools:
   144 van 144 en 125 van 125 glyfen contour- én breedte-identiek aan het v2-paar —
   het is één lettertypepaar onder twee namen, geen twee paren. De v2-namen winnen
   omdat Zenmo's eigen PowerPoint-sjabloon precies die insluit. */
@font-face {
  font-family: 'HolonBLOCK2CAPS';
  src: url('fonts/HolonBLOCK2CAPS.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HOLONline2';
  src: url('fonts/HOLONline2.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Source Sans 3, Adobes variabele release (SIL OFL 1.1). Eén bestand per stijl dekt
   het hele gewichtsbereik 200-900, dus `font-weight: 200 900` is geen bewering over
   een statieke snede: het vertelt de browser dat deze binary elk gewicht daartussen
   kan tekenen. Vervangt Mulish (besluit Auke 27-7-2026: "er moeten maar drie fonts
   zijn"); Mulish stond hier nooit in fonts/ en werd van de Google-CDN gehaald. */
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3VF-Upright.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3VF-Italic.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   THEMA-ONAFHANKELIJKE TOKENS
   ============================================================ */
.lux-root, [data-theme] {
  /* Typografie */
  --lux-font-display: 'HolonBLOCK2CAPS', sans-serif;  /* alleen grote titels, 3-5 woorden */
  --lux-font-heading: 'HOLONline2', sans-serif;       /* sectiekoppen, KPI-getallen */
  --lux-font-body: 'Source Sans 3', sans-serif;       /* alle UI- en bodytekst */
  --lux-font-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', monospace;

  /* De ondergrens is 12px, met precies TWEE opgeschreven uitzonderingen — allebei
     berekend uit dit token, zodat ze meebewegen en niet los kunnen drijven:
       .lux-sectionlabel  11px caps (lux-components.css) — de enige toegestane
                          uppercase-stijl; stond hier al ongedocumenteerd.
       .z1-type           11px in lux2's ControlPanel, omdat "Elektriciteit" op 12px
                          het tekstvak van 64px brak.
     Een derde uitzondering hoort hier eerst opgeschreven te worden, niet in een scherm. */
  --lux-text-xs: 12px;    /* badges, assen — ondergrens, zie hierboven */
  --lux-text-sm: 13px;    /* secundaire regels, metadata */
  --lux-text-base: 15px;  /* standaard UI-tekst */
  --lux-text-lg: 18px;    /* paneelkoppen */
  --lux-text-xl: 24px;    /* paginakoppen (HOLONline) */
  --lux-text-2xl: 34px;   /* titels (HOLONblock) */
  --lux-text-3xl: 48px;   /* hero (HOLONblock) */

  /* Spacing — 4px-schaal. Geen tussenwaarden verzinnen. */
  --lux-space-1: 4px;
  --lux-space-2: 8px;
  --lux-space-3: 12px;
  --lux-space-4: 16px;
  --lux-space-5: 24px;
  --lux-space-6: 32px;
  --lux-space-7: 40px;
  --lux-space-8: 56px;

  /* Radii */
  --lux-radius-sm: 6px;
  --lux-radius-md: 10px;
  --lux-radius-lg: 14px;
  --lux-radius-full: 999px;
  /* Merkvorm: rechthoek met één afgeronde hoek linksonder (Zenmo-vormtaal).
     Gebruik voor callouts, info-popovers en uitgelichte tekstblokken. */
  --lux-radius-brand: 6px 6px 6px 20px;

  /* Z-lagen */
  --lux-z-sticky: 20;
  --lux-z-popover: 40;
  --lux-z-drawer: 60;

  /* Beweging */
  --lux-transition: 140ms ease;

  /* Merkkleuren (vast, thema-onafhankelijk) */
  --lux-brand-teal: #007e84;   /* Lux green — hét accent van LUX */
  --lux-brand-yellow: #fcc200; /* Energy yellow — spaarzaam, highlights */
  --lux-brand-black: #1d1d1b;  /* New black */
  /* Zenmo red #e4005b bestaat, maar is VERBODEN in LUX-product-UI
     (huisstijlregel: LUX is onderdeel van Zenmo, niet andersom). */
}

/* ============================================================
   DARK (default) — kaart-app, viewers
   ============================================================ */
.lux-root, [data-theme="dark"] {
  color-scheme: dark;

  --lux-bg: #131312;            /* pagina-achtergrond */
  --lux-surface: #1d1d1b;       /* panelen, kaarten (New black) */
  --lux-surface-2: #262623;     /* verhoogde vlakken, hover-rijen */
  --lux-overlay: #2c2c29;       /* popovers, menu's */
  --lux-border: #3a3a36;
  --lux-border-strong: #55554f;

  --lux-text: #f4f3f0;
  --lux-text-muted: #b9b7b0;
  /* faint was #8b8983 — gemeten 4,00:1 op --lux-overlay en 4,34:1 op --lux-surface-2,
     dus onder WCAG AA (4,5:1) op twee van de vier donkere vlakken, terwijl DESIGN.md
     §0.10 AA eist. Opgehaald op 11-8-2026; gemeten nu: 4,84 overlay / 5,25 surface-2 /
     5,84 surface / 6,43 bg. Nog steeds duidelijk een stap onder muted. */
  --lux-text-faint: #9a988f;    /* alleen voor niet-essentiële metadata */

  /* Accent (Lux green, aangepast per thema voor contrast) */
  --lux-accent: #3aacb1;        /* tekst/iconen/links op donkere bg */
  --lux-accent-strong: #6cc5c9; /* hover-tekst */
  --lux-accent-fill: #007e84;   /* knop- en toggle-vulling */
  --lux-accent-fill-hover: #0b9298;
  /* Tekst- en icoonkleur ÓP een accentvulling. Stond op drie plekken in
     lux-components.css met de hand als #ffffff; dit is de ene plek waar het beslist
     wordt. Gemeten 4,86:1 op --lux-accent-fill — AA voor gewone tekst. Bewust per
     thema: --lux-accent-fill is vandaag toevallig in beide thema's dezelfde hex, maar
     verandert er ooit één, dan beweegt dit token mee. */
  --lux-on-accent: #ffffff;
  --lux-accent-subtle: rgba(0, 126, 132, 0.20);  /* selectie-achtergrond */
  --lux-accent-border: rgba(58, 172, 177, 0.45);

  --lux-highlight: #fcc200;
  --lux-highlight-subtle: rgba(252, 194, 0, 0.14);

  /* Status — ALTIJD combineren met icoon of label, nooit kleur alleen */
  --lux-success-fg: #58c996;
  --lux-success-bg: rgba(46, 160, 103, 0.16);
  --lux-warning-fg: #f0c249;
  --lux-warning-bg: rgba(230, 159, 0, 0.14);
  --lux-danger-fg: #f47f68;
  --lux-danger-bg: rgba(204, 51, 17, 0.16);
  --lux-info-fg: #63b4e4;
  --lux-info-bg: rgba(0, 119, 187, 0.16);

  --lux-focus: #6cc5c9;         /* focusring, 2px outline + 2px offset */
  --lux-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --lux-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.5);
  --lux-shadow-3: 0 16px 44px rgba(0, 0, 0, 0.6);
  --lux-backdrop: rgba(10, 10, 9, 0.55);
}

/* ============================================================
   LIGHT — rapporten, dashboards in kantooromgeving
   ============================================================ */
[data-theme="light"] {
  color-scheme: light;

  --lux-bg: #f6f5f2;
  --lux-surface: #ffffff;
  --lux-surface-2: #efeeea;
  --lux-overlay: #ffffff;
  --lux-border: #e0dfd9;
  --lux-border-strong: #c4c2ba;

  --lux-text: #1d1d1b;
  --lux-text-muted: #5d5b55;
  /* faint was #8b8983 — de meest gebruikte kleur na --lux-text, en hij zakte door
     WCAG AA op ALLE DRIE de lichte achtergronden: 3,01 op surface-2, 3,21 op bg,
     3,50 op surface (eis 4,5). Opgehaald op 11-8-2026; gemeten nu tegen de
     LUX-NL-achtergronden: 4,80 surface-2 / 5,11 bg / 5,57 surface. */
  --lux-text-faint: #6a6862;

  --lux-accent: #006b70;
  --lux-accent-strong: #007e84;
  --lux-accent-fill: #007e84;
  --lux-accent-fill-hover: #006b70;
  --lux-accent-subtle: rgba(0, 126, 132, 0.10);
  --lux-accent-border: rgba(0, 126, 132, 0.35);
  --lux-on-accent: #ffffff;     /* zie het donkere blok: één plek beslist wit-op-accent (4,86:1) */

  /* highlight was #a87c00 — gemeten 3,79:1 op --lux-surface, de laatste AA-fout uit
     de audit. Eén stap donkerder, zelfde tint; gemeten nu: 4,83 surface-2 / 5,14 bg /
     5,61 surface. */
  --lux-highlight: #856200;     /* Energy yellow als TEKST vraagt donkerder toon */
  --lux-highlight-subtle: rgba(252, 194, 0, 0.18);

  /* success-fg was #1a7f4e — gemeten 4,32:1 op --lux-surface-2, net onder AA. Gevonden op
     11-8-2026 door verify/stijlbron-gate.js, die de verhoudingen zelf narekent; deze zat in
     GEEN van de vier kopieën gecorrigeerd. Eén stap donkerder, zelfde tint; gemeten nu:
     5,13 surface-2 / 5,46 bg / 5,95 surface / 5,95 overlay. */
  --lux-success-fg: #177245;
  --lux-success-bg: rgba(26, 127, 78, 0.10);
  --lux-warning-fg: #91600a;
  --lux-warning-bg: rgba(230, 159, 0, 0.14);
  --lux-danger-fg: #bc3a22;
  --lux-danger-bg: rgba(204, 51, 17, 0.10);
  --lux-info-fg: #00588a;
  --lux-info-bg: rgba(0, 119, 187, 0.10);

  --lux-focus: #007e84;
  --lux-shadow-1: 0 1px 3px rgba(29, 29, 27, 0.10);
  --lux-shadow-2: 0 6px 20px rgba(29, 29, 27, 0.14);
  --lux-shadow-3: 0 16px 44px rgba(29, 29, 27, 0.20);
  --lux-backdrop: rgba(29, 29, 27, 0.35);
}

/* ============================================================
   BASIS
   ============================================================ */
.lux-root {
  background: var(--lux-bg);
  color: var(--lux-text);
  font-family: var(--lux-font-body);
  font-size: var(--lux-text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Nette scrollbars in panelen */
.lux-scroll { scrollbar-width: thin; scrollbar-color: var(--lux-border-strong) transparent; }
.lux-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.lux-scroll::-webkit-scrollbar-thumb { background: var(--lux-border-strong); border-radius: 4px; }

/* Focus — zichtbaar op ELK interactief element, niet weghalen */
.lux-root :focus-visible, [data-theme] :focus-visible {
  outline: 2px solid var(--lux-focus);
  outline-offset: 2px;
  border-radius: var(--lux-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .lux-root *, [data-theme] * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}