/*!
 * Capteur Support Portal — design tokens
 *
 * CAPTEUR-HUISSTIJL
 * -----------------
 * De merkkleuren zijn exact gemeten uit het aangeleverde Capteur-logo (docs/brand/capteur-logo-origineel.webp):
 *   - Capteur-navy  #133763  (beeldmerk "ac")      → primaire kleur: knoppen, links, zijbalk
 *   - Capteur-rood  #DE083C  (woordmerk "capteur") → accentkleur: merkaccenten, spaarzaam gebruikt
 * Officiële kleurspecificaties (bijv. Pantone/CMYK uit een huisstijlhandboek) en lettertypen zijn nog niet
 * aangeleverd; zie docs/brand-assets.md. Alle overige CSS verwijst uitsluitend naar deze custom properties.
 * Rood wordt bewust niet als primaire actiekleur gebruikt: rood betekent in de interface ook 'Critical' en
 * 'overschreden', en badges combineren altijd icoon + tekst.
 *
 * Regels:
 *  - Module-CSS gebruikt nooit hardgecodeerde kleuren, alleen var(--cap-*).
 *  - Iedere tekst/achtergrond-combinatie hieronder is gecontroleerd op WCAG 2.2 AA
 *    (≥ 4.5:1 tekst, ≥ 3:1 grote tekst en UI-componenten). Zie wwwroot/css/README.md.
 *    Wijzig je een waarde, draai dan de contrastcontrole opnieuw (zie README).
 *  - Kleur draagt nooit als enige betekenis: badges combineren altijd icoon + tekst.
 */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------- Brand (Capteur-huisstijl, gemeten uit het logo) */
  --cap-brand-navy: #133763;          /* Capteur-navy (beeldmerk) */
  --cap-brand-red: #DE083C;           /* Capteur-rood (woordmerk) */
  --cap-brand-primary: #133763;
  --cap-brand-primary-rgb: 19, 55, 99;
  --cap-brand-primary-hover: #0F2D52;
  --cap-brand-primary-active: #0B2340;
  --cap-brand-primary-subtle: #E7EDF5;
  --cap-brand-primary-border-subtle: #B6C5DA;
  --cap-brand-primary-text: #133763;
  --cap-brand-secondary: #DE083C;     /* accent = Capteur-rood (wit erop: 5,0:1) */
  --cap-brand-secondary-rgb: 222, 8, 60;
  --cap-brand-secondary-hover: #B9062F;
  --cap-brand-on-primary: #FFFFFF;

  /* ---------------------------------------------------------------- Surfaces */
  --cap-bg-app: #EEF2F7;              /* rustige grijsblauwe pagina-achtergrond */
  --cap-surface: #FFFFFF;             /* kaarten, panelen, topbar */
  --cap-surface-muted: #F5F7FA;       /* tabelkoppen, filterbalk, secundaire vlakken */
  --cap-surface-hover: #F0F4FA;       /* hover van rijen en lijstitems */
  --cap-surface-sunken: #E6EBF2;      /* skeletons, gedimde vlakken */
  --cap-skeleton-shine: rgba(255, 255, 255, 0.6);
  --cap-print-text: #000000;
  --cap-print-bg: #FFFFFF;

  /* ---------------------------------------------------------------- Text */
  --cap-text: #1A2433;
  --cap-text-muted: #4F5D70;
  --cap-text-inverse: #FFFFFF;
  --cap-link: #1B4A84;                /* iets lichtere navy: onderscheidbaar van de bodytekst */
  --cap-link-rgb: 27, 74, 132;
  --cap-link-hover: #133763;
  --cap-link-hover-rgb: 19, 55, 99;

  /* ---------------------------------------------------------------- Borders & focus */
  --cap-border: #D3DAE4;              /* decoratieve scheidingslijnen en kaartranden */
  --cap-border-strong: #7C8899;       /* formulierranden (≥ 3:1 t.o.v. surface) */
  --cap-focus-ring: #1F63C6;          /* focus-outline op lichte vlakken (≥ 3:1) */
  --cap-focus-ring-inverse: #8CC0FF;  /* focus-outline op de donkere zijbalk (≥ 3:1) */
  --cap-focus-ring-width: 3px;
  --cap-focus-ring-offset: 2px;
  --cap-focus-ring-shadow: 0 0 0 0.2rem rgba(31, 99, 198, 0.3);   /* extra glow op formuliervelden */
  --cap-danger-ring-shadow: 0 0 0 0.2rem rgba(179, 38, 30, 0.25);

  /* ---------------------------------------------------------------- Sidebar */
  --cap-sidebar-bg: #133763;               /* Capteur-navy */
  --cap-sidebar-text: #DCE4EF;
  --cap-sidebar-text-muted: #A7B6CB;
  --cap-sidebar-hover-bg: #1C4677;
  --cap-sidebar-active-bg: #24518A;
  --cap-sidebar-active-text: #FFFFFF;
  --cap-sidebar-active-indicator: #FF8FA8; /* lichte tint van Capteur-rood (≥ 3:1 op active-bg; puur rood haalt dat niet) */
  --cap-sidebar-border: #24477A;
  --cap-sidebar-action-bg: #FFFFFF;        /* prominente actie in de zijbalk ("Nieuwe melding") */
  --cap-sidebar-action-fg: #133763;
  --cap-sidebar-action-hover-bg: #E7EDF5;
  --cap-brand-logo-height: 1.625rem;       /* hoogte van het woordmerk in zijbalk en topbalk */
  --cap-brand-logo-stacked-width: 11rem;   /* breedte van het volledige logo op de inlogpagina's */

  /* ---------------------------------------------------------------- Feedback (alerts, validatie) */
  --cap-success-fg: #1B6537;
  --cap-success-bg: #E1F3E8;
  --cap-success-border: #A6D7B7;
  --cap-success-solid: #1E7B43;
  --cap-info-fg: #1C4F99;
  --cap-info-bg: #E3EDFC;
  --cap-info-border: #A9C5EE;
  --cap-warning-fg: #7A4A00;
  --cap-warning-bg: #FFF2D9;
  --cap-warning-border: #F0CF8A;
  --cap-danger-fg: #96201A;
  --cap-danger-bg: #FCE4E2;
  --cap-danger-border: #F0AFA9;
  --cap-danger-solid: #B3261E;
  --cap-danger-solid-hover: #96201A;

  /* ---------------------------------------------------------------- Ticketstatus */
  --cap-status-new-fg: #1C4F99;
  --cap-status-new-bg: #E3EDFC;
  --cap-status-new-border: #A9C5EE;
  --cap-status-in-progress-fg: #4B2F9A;
  --cap-status-in-progress-bg: #ECE8FA;
  --cap-status-in-progress-border: #C5B8EE;
  --cap-status-waiting-fg: #7A4A00;
  --cap-status-waiting-bg: #FFF2D9;
  --cap-status-waiting-border: #F0CF8A;
  --cap-status-resolved-fg: #1B6537;
  --cap-status-resolved-bg: #E1F3E8;
  --cap-status-resolved-border: #A6D7B7;
  --cap-status-closed-fg: #3E4757;
  --cap-status-closed-bg: #E8EBF0;
  --cap-status-closed-border: #C2C9D4;

  /* ---------------------------------------------------------------- Prioriteit */
  --cap-priority-normal-fg: #3A4A5F;
  --cap-priority-normal-bg: #EAEFF5;
  --cap-priority-normal-border: #C3CDDA;
  --cap-priority-high-fg: #8A3A00;
  --cap-priority-high-bg: #FFE9D6;
  --cap-priority-high-border: #F3BC8C;
  --cap-priority-critical-fg: #FFFFFF;
  --cap-priority-critical-bg: #B3261E;
  --cap-priority-critical-border: #B3261E;

  /* ---------------------------------------------------------------- Response-SLA */
  --cap-sla-running-fg: #0D5E57;
  --cap-sla-running-bg: #DFF1EF;
  --cap-sla-running-border: #9FD3CC;
  --cap-sla-at-risk-fg: #7A4500;
  --cap-sla-at-risk-bg: #FFF0D1;
  --cap-sla-at-risk-border: #E9B04A;
  --cap-sla-breached-fg: #FFFFFF;
  --cap-sla-breached-bg: #B3261E;
  --cap-sla-breached-border: #B3261E;
  --cap-sla-met-fg: #1B6537;
  --cap-sla-met-bg: #E1F3E8;
  --cap-sla-met-border: #A6D7B7;
  --cap-sla-late-fg: #96201A;
  --cap-sla-late-bg: #FCE4E2;
  --cap-sla-late-border: #F0AFA9;
  --cap-sla-paused-fg: #445468;
  --cap-sla-paused-bg: #ECEFF4;
  --cap-sla-paused-border: #C5CDD8;

  /* ---------------------------------------------------------------- Bijlagen (scanstatus), type, zichtbaarheid */
  --cap-scan-pending-fg: #445468;
  --cap-scan-pending-bg: #ECEFF4;
  --cap-scan-clean-fg: #1B6537;
  --cap-scan-clean-bg: #E1F3E8;
  --cap-scan-blocked-fg: #96201A;
  --cap-scan-blocked-bg: #FCE4E2;
  --cap-scan-not-scanned-fg: #4A4F57;
  --cap-scan-not-scanned-bg: #F1F2F4;
  --cap-scan-not-scanned-border: #B9BEC6;
  --cap-type-fg: #2E3B4E;
  --cap-type-bg: #FFFFFF;
  --cap-type-border: #AEB8C6;
  --cap-visibility-public-fg: #1C4F99;
  --cap-visibility-public-bg: #E3EDFC;

  /* ---------------------------------------------------------------- Interne notities (alleen Capteur) */
  --cap-internal-bg: #FFF7D6;
  --cap-internal-fg: #5E4600;
  --cap-internal-border: #A87C00;
  --cap-internal-hatch: rgba(168, 124, 0, 0.10);
  --cap-internal-label-bg: #5E4600;
  --cap-internal-label-fg: #FFFFFF;

  /* ---------------------------------------------------------------- KPI-accenten */
  --cap-kpi-alert-accent: #B3261E;
  --cap-kpi-warning-accent: #B26A00;
  --cap-kpi-accent: #133763;

  /* ---------------------------------------------------------------- Grafieken (Chart.js)
     Kleurenblind-vriendelijke categorische volgorde (gevalideerd: CVD ΔE ≥ 8 tussen buren).
     Gebruik de slots in vaste volgorde; slots 3, 4 en 5 halen < 3:1 op wit → toon altijd een
     legenda/directe labels of een tabelweergave. Nooit een 9e kleur genereren: groepeer als "Overig". */
  --cap-chart-1: #2A78D6;
  --cap-chart-2: #EB6834;
  --cap-chart-3: #1BAF7A;
  --cap-chart-4: #EDA100;
  --cap-chart-5: #E87BA4;
  --cap-chart-6: #008300;
  --cap-chart-7: #4A3AA7;
  --cap-chart-8: #E34948;
  --cap-chart-grid: #E3E8EF;
  --cap-chart-axis: #4F5D70;
  --cap-chart-text: #1A2433;

  /* ---------------------------------------------------------------- Typography (systeemfonts, geen externe fonts) */
  --cap-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --cap-font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --cap-font-size-xs: 0.75rem;
  --cap-font-size-sm: 0.875rem;
  --cap-font-size-base: 1rem;
  --cap-font-size-lg: 1.125rem;
  --cap-font-size-xl: 1.375rem;
  --cap-font-size-2xl: 1.75rem;
  --cap-line-height: 1.5;
  --cap-font-weight-medium: 500;
  --cap-font-weight-semibold: 600;
  --cap-font-weight-bold: 700;

  /* ---------------------------------------------------------------- Radius, spacing, shadow */
  --cap-radius-sm: 0.25rem;
  --cap-radius: 0.5rem;
  --cap-radius-lg: 0.75rem;
  --cap-radius-pill: 50rem;
  --cap-space-1: 0.25rem;
  --cap-space-2: 0.5rem;
  --cap-space-3: 0.75rem;
  --cap-space-4: 1rem;
  --cap-space-5: 1.5rem;
  --cap-space-6: 2rem;
  --cap-space-7: 3rem;
  --cap-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --cap-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.05);
  --cap-shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, 0.14), 0 4px 8px -4px rgba(16, 24, 40, 0.06);

  /* ---------------------------------------------------------------- Layout */
  --cap-sidebar-width: 16rem;
  --cap-topbar-height: 3.5rem;
  --cap-content-max-width: 96rem;
  --cap-transition: 150ms ease-in-out;

  /* ---------------------------------------------------------------- Bootstrap 5.3 mapping
     Bootstrap-variabelen verwijzen naar de Capteur-tokens zodat utility-klassen (text-primary,
     bg-primary-subtle, link-*, borders, …) dezelfde Capteur-huisstijl volgen. Componenten die in
     Bootstrap vaste kleuren gebruiken (knoppen, formulieren, paginering) worden in site.css gemapt. */
  --bs-font-sans-serif: var(--cap-font-sans);
  --bs-font-monospace: var(--cap-font-mono);
  --bs-body-font-family: var(--cap-font-sans);
  --bs-body-font-size: var(--cap-font-size-base);
  --bs-body-line-height: var(--cap-line-height);
  --bs-body-color: var(--cap-text);
  --bs-body-color-rgb: 26, 36, 51;
  /* Bootstrap gebruikt --bs-body-bg als oppervlak van kaarten, formulieren, dropdowns en modals:
     daarom wit. De rustige pagina-achtergrond (--cap-bg-app) zet site.css op <body>. */
  --bs-body-bg: var(--cap-surface);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: var(--cap-text);
  --bs-secondary-color: var(--cap-text-muted);
  --bs-secondary-bg: var(--cap-surface-sunken);
  --bs-tertiary-color: var(--cap-text-muted);
  --bs-tertiary-bg: var(--cap-surface-muted);
  --bs-heading-color: var(--cap-text);
  --bs-link-color: var(--cap-link);
  --bs-link-color-rgb: var(--cap-link-rgb);
  --bs-link-hover-color: var(--cap-link-hover);
  --bs-link-hover-color-rgb: var(--cap-link-hover-rgb);
  --bs-border-color: var(--cap-border);
  --bs-border-color-translucent: rgba(26, 36, 51, 0.14);
  --bs-border-radius: var(--cap-radius);
  --bs-border-radius-sm: var(--cap-radius-sm);
  --bs-border-radius-lg: var(--cap-radius-lg);
  --bs-border-radius-pill: var(--cap-radius-pill);
  --bs-box-shadow-sm: var(--cap-shadow-sm);
  --bs-box-shadow: var(--cap-shadow-md);
  --bs-box-shadow-lg: var(--cap-shadow-lg);
  --bs-focus-ring-color: rgba(31, 99, 198, 0.35);
  --bs-focus-ring-width: 0.25rem;

  --bs-primary: var(--cap-brand-primary);
  --bs-primary-rgb: var(--cap-brand-primary-rgb);
  --bs-primary-text-emphasis: var(--cap-brand-primary-text);
  --bs-primary-bg-subtle: var(--cap-brand-primary-subtle);
  --bs-primary-border-subtle: var(--cap-brand-primary-border-subtle);
  --bs-secondary: #4F5D70;
  --bs-secondary-rgb: 79, 93, 112;
  --bs-success: var(--cap-success-solid);
  --bs-success-rgb: 30, 123, 67;
  --bs-success-text-emphasis: var(--cap-success-fg);
  --bs-success-bg-subtle: var(--cap-success-bg);
  --bs-success-border-subtle: var(--cap-success-border);
  --bs-info: var(--cap-info-fg);
  --bs-info-rgb: 28, 79, 153;
  --bs-info-text-emphasis: var(--cap-info-fg);
  --bs-info-bg-subtle: var(--cap-info-bg);
  --bs-info-border-subtle: var(--cap-info-border);
  --bs-warning: #B26A00;
  --bs-warning-rgb: 178, 106, 0;
  --bs-warning-text-emphasis: var(--cap-warning-fg);
  --bs-warning-bg-subtle: var(--cap-warning-bg);
  --bs-warning-border-subtle: var(--cap-warning-border);
  --bs-danger: var(--cap-danger-solid);
  --bs-danger-rgb: 179, 38, 30;
  --bs-danger-text-emphasis: var(--cap-danger-fg);
  --bs-danger-bg-subtle: var(--cap-danger-bg);
  --bs-danger-border-subtle: var(--cap-danger-border);
  --bs-light: var(--cap-surface-muted);
  --bs-light-rgb: 245, 247, 250;
  --bs-dark: var(--cap-text);
  --bs-dark-rgb: 26, 36, 51;
  --bs-form-valid-color: var(--cap-success-fg);
  --bs-form-valid-border-color: var(--cap-success-solid);
  --bs-form-invalid-color: var(--cap-danger-fg);
  --bs-form-invalid-border-color: var(--cap-danger-solid);
  --bs-highlight-bg: var(--cap-internal-bg);
  --bs-code-color: var(--cap-danger-fg);
}