/* NMS — aanvullende tokens (bouwplan v3, besluit B1 en B2).
 *
 * Hierin staat UITSLUITEND wat de applicatielaag gebruikt en wat de twee geleverde
 * mappen niet tokeniseren. Elke regel noemt de vindplaats in de bron. Nieuwe waarden
 * toevoegen mag niet zonder besluit (bouwplan §9).
 *
 * Geen kleurwaarde in dit bestand op één na: --nms-focus-ring-on-navy verwijst naar
 * een bestaande merkkleur en introduceert er geen nieuwe.
 */
:root {
  /* --- fontgroottes tussen --text-micro (12px) en --text-small (14px), en boven
         --text-h4. De DS-schaal is in rem en heeft deze tussenmaten niet. --- */
  --nms-text-11: 11px;   /* 43× in de componenten: celmeta, tellers, kolomkop-subregel */
  --nms-text-13: 13px;   /* 22×: navigatielabel (SideNav), celtekst, veldtekst */
  --nms-text-18: 18px;   /* sectiekop in SectionCard */
  --nms-text-20: 20px;   /* paginakop in PageHeader */
  --nms-text-22: 22px;   /* waarde in MetricTile */
  --nms-text-32: 32px;   /* grote waarde in MetricTile / SeriesChart */

  /* --- lijnen --- */
  --nms-hairline-w: 1px; /* 76×: elke hairline en elke tabellijn in de componenten */

  /* --- hoogtes die --nms-row-h-comfortable/-compact niet dekken --- */
  --nms-row-h-sub: 36px; /* SideNav.jsx: subpagina-ingang, minHeight 36px */

  /* --- tussenmaten die de spacing-schaal niet heeft (4-8-12-16-20-24) --- */
  --nms-gap-5: 5px;
  --nms-gap-22: 22px;
  --nms-gap-28: 28px;

  /* --- vaste kolommen van de rollenmatrix ---
         MatrixGrid.prompt.md: template="240px repeat(19, 44px) 200px 132px" */
  --nms-col-first: 240px;
  --nms-col-field: 200px;
  --nms-col-actions: 132px;

  /* --- knop --- */
  --nms-btn-pad-x-md: 26px; /* _ds_bundle.js, SIZES.md: padding "13px 26px" */

  /* --- fase 2: vier maten uit de statuscomponenten die B1 nog niet noemde.
         Gemeten in de bron, geen ontwerpvrijheid; gemeld bij de oplevering. --- */
  --nms-attention-pad-block: 2px;  /* StatusMark.jsx: paddingBlock bij kind="attentie" */
  --nms-chip-h: 22px;              /* DateChip.jsx: height "22px" (prompt: "22px hoog") */
  --nms-chip-gap: 6px;             /* DateChip.jsx: gap "6px" tussen teken en datum */
  --nms-chip-underline-w: 2px;     /* DateChip.jsx: borderBottom 2px bij vervallen */

  /* --- fase 3: tabel, staten en de balken eromheen.
         Tussenmaten die de spacing-schaal (4-8-12-16-20-24) niet heeft, plus een
         paar maten met een eigen rol. Alle waarden gemeten in de bron. --- */
  --nms-gap-2: 2px;                /* CellStack.jsx: gap tussen hoofd- en subregel */
  --nms-gap-6: 6px;                /* ColumnHeader/Pagination: gap naast het teken */
  --nms-gap-9: 9px;                /* ColumnHeader.jsx: padding-block "9px" */
  --nms-gap-10: 10px;              /* FilterBar/Pagination/EmptyState: padding en gap */
  --nms-gap-14: 14px;              /* RowActions.jsx: gap tussen acties (compact 10px) */
  --nms-row-rule-w: 3px;           /* TableRow.jsx: borderLeft, ook in doorzichtige stand */
  --nms-accent-rule-w: 2px;        /* TabsWithCount.jsx: 2px onderlijn van de actieve tab */
  --nms-icon-sm: 12px;             /* sorteerpijl (ColumnHeader), externe-linkteken (CellStack) */
  --nms-icon-lg: 22px;             /* ErrorState.jsx: attentieteken 22px */
  --nms-counter-h: 18px;           /* TabsWithCount.jsx: hoogte van de teller */
  --nms-counter-min-w: 20px;       /* TabsWithCount.jsx: minimale breedte van de teller */
  --nms-counter-pad-x: 5px;        /* TabsWithCount.jsx: padding "0 5px" */
  --nms-skeleton-h: 9px;           /* SkeletonRows.jsx: hoogte hoofdbalk */
  --nms-skeleton-h-soft: 7px;      /* SkeletonRows.jsx: hoogte subbalk */
  --nms-state-pad: 64px;           /* EmptyState.jsx: 64px bij een lege module */
  --nms-state-pad-filter: 40px;    /* EmptyState.jsx: 40px bij een leeg filter */
  --nms-state-pad-error: 56px;     /* ErrorState.jsx: 56px */
  --nms-measure: 52ch;             /* EmptyState/ErrorState: maat van de tekst */
  --nms-measure-wide: 60ch;        /* ErrorState.jsx: maat van de technische verwijzing */

  /* --- fase 4: chroom (AppShell, SideNav, TopBar, UserMenu, Breadcrumb,
         PageHeader, MyItemsColumn). Maten uit de bron. --- */
  --nms-nav-w: 248px;              /* AppShell.jsx: zijnavigatie */
  --nms-nav-w-ingeklapt: 64px;     /* AppShell.jsx: ingeklapt */
  --nms-aside-w: 304px;            /* AppShell.jsx: rechterkolom, vast */
  --nms-topbar-h: 56px;            /* TopBar.jsx: minHeight */
  --nms-knop-h: 36px;              /* TopBar/UserMenu: knophoogte */
  --nms-nav-inspring: 43px;        /* SideNav.jsx: inspringing van een subpagina */
  --nms-taak-inspring: 21px;       /* MyItemsColumn.jsx: uitlijnen onder het ernstteken */
  --nms-menu-min-w: 200px;         /* UserMenu.jsx: minimale breedte van het menu */
  --nms-gap-18: 18px;              /* MyItemsColumn.jsx: padding van de kop */
  --nms-balk-h: 6px;               /* MyItemsColumn.jsx: hoogte van de voortgangsbalk */
  --nms-text-10: 10px;             /* UserMenu.jsx: rol onder de gebruikersnaam */
  --nms-tracking-knop: .04em;      /* TopBar.jsx: letterSpacing van de schakelaar */

  /* --- op navy: de zijnavigatie is in BEIDE varianten navy, dus wit met
         doorzichtigheid is daar de inkt. De bron hardcodeert deze waarden in
         SideNav.jsx; hier krijgen ze een naam. Geen nieuwe kleur: het is wit. --- */
  --nms-op-navy-fg: var(--text-on-inverse);      /* actief label */
  --nms-op-navy-fg-rust: rgba(255, 255, 255, .76); /* SideNav.jsx: inactieve ingang */
  --nms-op-navy-fg-sub: rgba(255, 255, 255, .68);  /* SideNav.jsx: inactieve subpagina */
  --nms-op-navy-vlak: rgba(255, 255, 255, .12);    /* SideNav.jsx: actief vlak */
  --nms-op-navy-vlak-zacht: rgba(255, 255, 255, .06); /* hover */
  --nms-op-navy-lijn: rgba(255, 255, 255, .18);    /* SideNav.jsx: scheidingslijn */
  --nms-op-navy-lijn-sterk: rgba(255, 255, 255, .34); /* SideNav.jsx: rand van de inklapknop */
  --nms-op-navy-fg-zacht: rgba(255, 255, 255, .72);   /* Toast.jsx: detailregel op navy */

  /* --- fase 5: formulieren en feedback. Maten uit de bron. --- */
  --nms-knop-h-xs: 32px;           /* AppButton.jsx: HEIGHTS.xs */
  --nms-knop-h-md: 40px;           /* AppButton.jsx: HEIGHTS.md */
  --nms-knop-pad-x: 14px;          /* AppButton.jsx: padding "0 14px" */
  --nms-knop-pad-x-xs: 10px;       /* AppButton.jsx: padding "0 10px" bij xs */
  --nms-knop-pad-x-blok: 18px;     /* BlockedAction.jsx: padding "0 18px" */
  --nms-veld-h: 40px;              /* AppTextField.jsx: HEIGHTS.md */
  --nms-veld-h-sm: 36px;           /* AppTextField.jsx: HEIGHTS.sm */
  --nms-veld-pad-x: 10px;          /* AppTextField.jsx: padding "0 10px" */
  --nms-select-pad-eind: 40px;     /* AppSelectField.jsx: ruimte voor het pijltje */
  --nms-select-pijl: 8px;          /* DS-Select: het pijltje zelf */
  --nms-veld-onderlijn-w: 2px;     /* AppTextField.jsx: 2px onderlijn bij focus en fout */

  --nms-modal-w: 520px;            /* Modal.jsx: maxWidth */
  --nms-paneel-w: 420px;           /* SidePanel.jsx: maxWidth */
  --nms-toast-min-w: 280px;        /* Toast.jsx: minWidth */
  --nms-toast-max-w: 420px;        /* Toast.jsx: maxWidth */
  --nms-tooltip-max-w: 240px;      /* Tooltip.jsx: maxWidth */
  --nms-lijst-max-h: 220px;        /* TypeAhead.jsx: maxHeight van de trefferlijst */
  --nms-samenvatting-max-h: 320px; /* ErrorSummary.jsx: maxHeight */
  --nms-sluitknop: 24px;           /* Toast.jsx: sluitknop */
  --nms-scale-h: 28px;             /* AssessmentRow.jsx: minHeight van een schaaloptie */
  --nms-vinkje: 16px;              /* AssessmentRow.jsx: radiobutton en aanvinkvakje */
  --nms-beoordeling-kol: 268px;    /* AssessmentRow.jsx: kolom met schaal en opmerking */
  --nms-beoordeling-datum: 150px;  /* AssessmentRow.jsx: datumkolom bij documentcontrole */

  /* De enige scrim naast het fotoscrim: navy op 55%, geen blur (Modal.prompt.md). */
  --nms-scrim: rgba(0, 40, 86, .55);

  /* --- fase 6: dashboardtegels en de rollenmatrix. Maten uit de bron. --- */
  --nms-tegel-pad-y: 18px;         /* MetricTile.jsx: padding "18px 20px" */
  --nms-grafiek-h: 180px;          /* SeriesChart.jsx: height */
  --nms-staaf-w: 18px;             /* SeriesChart.jsx: breedte van een staaf */
  --nms-staaf-gap: 3px;            /* SeriesChart.jsx: ruimte tussen staven van één categorie */
  --nms-legenda-blok: 14px;        /* SeriesChart.jsx: het vulblokje in de legenda */

  --nms-matrix-kop-h: 132px;       /* RotatedColumnHeader.jsx: hoogte van de kopstrook */
  --nms-matrix-groepkop-h: 28px;   /* MatrixGrid.jsx: groupHeaderHeight */
  --nms-matrix-kol: 44px;          /* MatrixGrid: kolombreedte = de aanraakmaat */
  --nms-matrix-min-w: 1680px;      /* MatrixGrid.jsx: minWidth */
  --nms-matrix-max-h: 70vh;        /* MatrixGrid.jsx: maxHeight */
  --nms-matrix-kop-onder: 8px;     /* RotatedColumnHeader.jsx: bottom van het label */
  --nms-matrix-rotatie: -45deg;    /* RotatedColumnHeader.jsx: transform */
  --nms-lijst-max-h-lang: 300px;   /* CheckboxList.jsx: maxHeight van de lijst */
  --nms-lijst-rij-h: 32px;         /* CheckboxList.jsx: minHeight van een regel */
  --nms-groepkop-pad: 7px;         /* ColumnGroupHeader.jsx: padding-block */

  /* --- besluit B2: focus op een navy vlak ---
         guidelines/focus.md stelt de blauwtint-ring vast voor navy, maar legt hem
         alleen in app-night.css vast. De zijnavigatie is ook overdag navy, dus geldt
         deze ring in BEIDE varianten. Blauwtint is een merkkleur; geen nieuwe waarde. */
  --nms-focus-ring-on-navy: var(--nimo-blauwtint);
}