/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --zendd-color-purple-50: #FAF5FF;
  --zendd-color-purple-100: #F3E8FF;
  --zendd-color-purple-200: #E9D5FF;
  --zendd-color-purple-300: #D8B4FE;
  --zendd-color-purple-400: #C084FC;
  --zendd-color-purple-500: #9157FA;
  --zendd-color-purple-600: #7C3AED;
  --zendd-color-purple-700: #6D28D9;
  --zendd-color-purple-800: #5B21B6;
  --zendd-color-purple-900: #4C1D95;
  --zendd-color-navy-50: #F0EFF5;
  --zendd-color-navy-100: #E0DFEB;
  --zendd-color-navy-200: #C1BFD7;
  --zendd-color-navy-300: #A39EC3;
  --zendd-color-navy-400: #847EAF;
  --zendd-color-navy-500: #655E9B;
  --zendd-color-navy-600: #49437D;
  --zendd-color-navy-700: #3A3569;
  --zendd-color-navy-800: #29235C;
  --zendd-color-navy-900: #1E1A47;
  --zendd-color-gray-50: #F8FAFC;
  --zendd-color-gray-100: #F1F5F9;
  --zendd-color-gray-200: #E2E8F0;
  --zendd-color-gray-300: #CBD5E1;
  --zendd-color-gray-400: #94A3B8;
  --zendd-color-gray-500: #64748B;
  --zendd-color-gray-600: #475569;
  --zendd-color-gray-700: #334155;
  --zendd-color-gray-800: #1E293B;
  --zendd-color-gray-900: #0F172A;
  --zendd-color-coral-50: #FFF5F5;
  --zendd-color-coral-100: #FEE2E2;
  --zendd-color-coral-200: #FECACA;
  --zendd-color-coral-300: #FCA5A5;
  --zendd-color-coral-400: #F87171;
  --zendd-color-coral-500: #FF4C39;
  --zendd-color-coral-600: #DC2626;
  --zendd-color-coral-700: #C54C39;
  --zendd-color-coral-800: #991B1B;
  --zendd-color-coral-900: #7F1D1D;
  --zendd-color-amber-50: #FFFBEB;
  --zendd-color-amber-100: #FEF3C7;
  --zendd-color-amber-200: #FDE68A;
  --zendd-color-amber-300: #FCD34D;
  --zendd-color-amber-400: #F9B233;
  --zendd-color-amber-500: #E5A020;
  --zendd-color-amber-600: #D97706;
  --zendd-color-amber-700: #B48100;
  --zendd-color-amber-800: #92400E;
  --zendd-color-amber-900: #78350F;
  --zendd-color-sky-50: #F0F9FF;
  --zendd-color-sky-100: #E0F2FE;
  --zendd-color-sky-200: #BAE6FD;
  --zendd-color-sky-300: #7DD3FC;
  --zendd-color-sky-400: #36A9E1;
  --zendd-color-sky-500: #0EA5E9;
  --zendd-color-sky-600: #0284C7;
  --zendd-color-sky-700: #2B8BBD;
  --zendd-color-sky-800: #075985;
  --zendd-color-sky-900: #0C4A6E;
  --zendd-color-green-50: #F0FDF4;
  --zendd-color-green-100: #DCFCE7;
  --zendd-color-green-200: #BBF7D0;
  --zendd-color-green-300: #86EFAC;
  --zendd-color-green-400: #4ADE80;
  --zendd-color-green-500: #22C55E;
  --zendd-color-green-600: #16A34A;
  --zendd-color-green-700: #15803D;
  --zendd-color-green-800: #166534;
  --zendd-color-green-900: #14532D;
  --zendd-color-white: #FFFFFF;
  --zendd-color-black: #000000;
  --zendd-font-family-heading: 'Poppins', system-ui, sans-serif;
  --zendd-font-family-body: 'Open Sans', system-ui, sans-serif;
  --zendd-font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --zendd-font-size-xs: 0.75rem;
  --zendd-font-size-sm: 0.8125rem;
  --zendd-font-size-base: 0.875rem;
  --zendd-font-size-lg: 1rem;
  --zendd-font-size-xl: 1.125rem;
  --zendd-font-size-2xl: 1.5rem;
  --zendd-font-size-3xl: 1.875rem;
  --zendd-font-size-4xl: 2.25rem;
  --zendd-space-0: 0;
  --zendd-space-1: 0.25rem;
  --zendd-space-2: 0.5rem;
  --zendd-space-3: 0.75rem;
  --zendd-space-4: 1rem;
  --zendd-space-5: 1.25rem;
  --zendd-space-6: 1.5rem;
  --zendd-space-8: 2rem;
  --zendd-space-10: 2.5rem;
  --zendd-space-12: 3rem;
  --zendd-space-16: 4rem;
  --zendd-radius-sm: 0.25rem;
  --zendd-radius-md: 0.375rem;
  --zendd-radius-lg: 0.5rem;
  --zendd-radius-xl: 0.75rem;
  --zendd-radius-full: 9999px;
  --zendd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --zendd-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --zendd-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --zendd-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --zendd-surface-secondary: #F8FAFC;
  --zendd-surface-tertiary: #F1F5F9;
  --zendd-text-primary: #1E293B;
  --zendd-text-secondary: #64748B;
  --zendd-text-tertiary: #94A3B8;
  --zendd-text-on-warning: #1E293B;
  --zendd-border-default: #E2E8F0;
  --zendd-border-light: #F1F5F9;
  --zendd-border-strong: #CBD5E1;
  --zendd-focus-outline-width: 2px;
  --zendd-focus-outline-offset: 2px;
  --zendd-transition-fast: 150ms ease;
  --zendd-transition-normal: 200ms ease;
  --zendd-transition-slow: 300ms ease-out;
  --zendd-z-index-base: 0;
  --zendd-z-index-dropdown: 10;
  --zendd-z-index-sticky: 20;
  --zendd-z-index-sidebar: 30;
  --zendd-z-index-overlay: 40;
  --zendd-z-index-modal: 50;
  --zendd-z-index-toast: 60;
  --zendd-layout-sidebar-width: 16rem;
  --zendd-layout-sidebar-width-collapsed: 4rem;
  --zendd-layout-header-height: 4rem;
  --zendd-layout-touch-target-min: 44px;
  --zendd-button-font-weight: 600;
  --zendd-button-secondary-background-color: transparent;
  --zendd-button-ghost-background-color: transparent;
  --zendd-badge-font-weight: 600;
  --zendd-badge-padding-block: 0.125rem;
  --zendd-badge-min-block-size: 24px;
  --zendd-sidenav-group-label-font-weight: 600;
  --zendd-sidenav-group-label-letter-spacing: 0.05em;
  --zendd-sidenav-group-label-text-transform: uppercase;
  --zendd-table-header-font-weight: 600;
  --zendd-input-focus-ring-color: rgba(124, 58, 237, 0.15);
  --zendd-input-error-ring-color: rgba(197, 76, 57, 0.15);
  --zendd-skip-link-font-weight: 600;
  --zendd-page-header-title-font-weight: 700;
  --zendd-page-header-subtitle-font-weight: 500;
  --zendd-spinner-size: 1.5rem;
  --zendd-spinner-border-width: 2px;
  --zendd-dialog-overlay-color: rgba(0, 0, 0, 0.5);
  --zendd-dialog-max-width: 32rem;
  --zendd-checkbox-size: 1.25rem;
  --zendd-radio-size: 1.25rem;
  --zendd-progress-list-step-size: 2rem;
  --zendd-progress-list-connector-width: 2px;
  --zendd-action-primary-color: var(--zendd-color-purple-600);
  --zendd-action-primary-hover: var(--zendd-color-purple-700);
  --zendd-action-primary-active: var(--zendd-color-navy-600);
  --zendd-action-primary-light: var(--zendd-color-purple-100);
  --zendd-action-primary-muted: var(--zendd-color-purple-300);
  --zendd-feedback-success-color: var(--zendd-color-green-700);
  --zendd-feedback-success-hover: var(--zendd-color-green-800);
  --zendd-feedback-success-light: var(--zendd-color-green-100);
  --zendd-feedback-success-muted: var(--zendd-color-green-300);
  --zendd-feedback-warning-color: var(--zendd-color-amber-400);
  --zendd-feedback-warning-hover: var(--zendd-color-amber-500);
  --zendd-feedback-warning-light: var(--zendd-color-amber-100);
  --zendd-feedback-warning-muted: var(--zendd-color-amber-300);
  --zendd-feedback-warning-dark: var(--zendd-color-amber-700);
  --zendd-feedback-danger-color: var(--zendd-color-coral-700);
  --zendd-feedback-danger-hover: var(--zendd-color-coral-800);
  --zendd-feedback-danger-light: var(--zendd-color-coral-100);
  --zendd-feedback-danger-muted: var(--zendd-color-coral-300);
  --zendd-feedback-info-color: var(--zendd-color-sky-400);
  --zendd-feedback-info-hover: var(--zendd-color-sky-700);
  --zendd-feedback-info-light: var(--zendd-color-sky-100);
  --zendd-feedback-info-muted: var(--zendd-color-sky-300);
  --zendd-surface-primary: var(--zendd-color-white);
  --zendd-surface-dark: var(--zendd-color-navy-800);
  --zendd-surface-darker: var(--zendd-color-navy-900);
  --zendd-text-inverse: var(--zendd-color-white);
  --zendd-text-on-primary: var(--zendd-color-white);
  --zendd-text-on-danger: var(--zendd-color-white);
  --zendd-text-on-success: var(--zendd-color-white);
  --zendd-text-on-info: var(--zendd-color-white);
  --zendd-text-link: var(--zendd-color-purple-600);
  --zendd-border-focus: var(--zendd-color-purple-600);
  --zendd-border-danger: var(--zendd-color-coral-700);
  --zendd-border-success: var(--zendd-color-green-700);
  --zendd-border-warning: var(--zendd-color-amber-600);
  --zendd-border-info: var(--zendd-color-sky-600);
  --zendd-focus-outline-color: var(--zendd-color-purple-600);
  --zendd-button-font-family: var(--zendd-font-family-body);
  --zendd-button-font-size: var(--zendd-font-size-sm);
  --zendd-button-border-radius: var(--zendd-radius-md);
  --zendd-button-min-block-size: var(--zendd-layout-touch-target-min);
  --zendd-button-padding-block: var(--zendd-space-2);
  --zendd-button-padding-inline: var(--zendd-space-4);
  --zendd-button-warning-color: var(--zendd-text-on-warning);
  --zendd-button-ghost-color: var(--zendd-text-secondary);
  --zendd-button-ghost-hover-background: var(--zendd-surface-tertiary);
  --zendd-badge-font-size: var(--zendd-font-size-xs);
  --zendd-badge-border-radius: var(--zendd-radius-full);
  --zendd-badge-padding-inline: var(--zendd-space-2);
  --zendd-badge-primary-color: var(--zendd-color-purple-800);
  --zendd-badge-primary-border-color: var(--zendd-color-purple-200);
  --zendd-badge-success-color: var(--zendd-color-green-800);
  --zendd-badge-success-border-color: var(--zendd-color-green-200);
  --zendd-badge-warning-color: var(--zendd-color-amber-800);
  --zendd-badge-warning-border-color: var(--zendd-color-amber-200);
  --zendd-badge-danger-color: var(--zendd-color-coral-800);
  --zendd-badge-danger-border-color: var(--zendd-color-coral-200);
  --zendd-badge-info-color: var(--zendd-color-sky-800);
  --zendd-badge-info-border-color: var(--zendd-color-sky-200);
  --zendd-badge-muted-background-color: var(--zendd-surface-tertiary);
  --zendd-badge-muted-color: var(--zendd-text-secondary);
  --zendd-badge-muted-border-color: var(--zendd-border-default);
  --zendd-badge-code-background-color: var(--zendd-color-purple-100);
  --zendd-badge-code-color: var(--zendd-color-purple-800);
  --zendd-badge-code-border-color: var(--zendd-color-purple-200);
  --zendd-badge-code-font-family: var(--zendd-font-family-mono);
  --zendd-card-border-color: var(--zendd-border-default);
  --zendd-card-border-radius: var(--zendd-radius-lg);
  --zendd-card-padding: var(--zendd-space-4);
  --zendd-card-shadow: var(--zendd-shadow-sm);
  --zendd-card-hover-shadow: var(--zendd-shadow-md);
  --zendd-sidenav-background-color: var(--zendd-color-navy-800);
  --zendd-sidenav-width: var(--zendd-layout-sidebar-width);
  --zendd-sidenav-item-color: var(--zendd-color-navy-200);
  --zendd-sidenav-item-font-size: var(--zendd-font-size-sm);
  --zendd-sidenav-item-padding-block: var(--zendd-space-2);
  --zendd-sidenav-item-padding-inline: var(--zendd-space-4);
  --zendd-sidenav-item-border-radius: var(--zendd-radius-md);
  --zendd-sidenav-item-min-block-size: var(--zendd-layout-touch-target-min);
  --zendd-sidenav-item-hover-background-color: var(--zendd-color-navy-700);
  --zendd-sidenav-group-label-font-size: var(--zendd-font-size-xs);
  --zendd-sidenav-group-label-color: var(--zendd-color-navy-300);
  --zendd-alert-border-radius: var(--zendd-radius-md);
  --zendd-alert-padding: var(--zendd-space-3);
  --zendd-alert-success-color: var(--zendd-color-green-800);
  --zendd-alert-warning-color: var(--zendd-color-amber-800);
  --zendd-alert-danger-color: var(--zendd-color-coral-800);
  --zendd-alert-info-color: var(--zendd-color-sky-800);
  --zendd-table-header-font-size: var(--zendd-font-size-xs);
  --zendd-table-header-color: var(--zendd-text-secondary);
  --zendd-table-header-padding: var(--zendd-space-2) var(--zendd-space-3);
  --zendd-table-header-border-color: var(--zendd-border-default);
  --zendd-table-cell-font-size: var(--zendd-font-size-sm);
  --zendd-table-cell-padding: var(--zendd-space-2) var(--zendd-space-3);
  --zendd-table-cell-border-color: var(--zendd-border-light);
  --zendd-table-row-hover-background-color: var(--zendd-surface-secondary);
  --zendd-input-font-size: var(--zendd-font-size-sm);
  --zendd-input-padding: var(--zendd-space-2) var(--zendd-space-3);
  --zendd-input-border-color: var(--zendd-border-default);
  --zendd-input-border-radius: var(--zendd-radius-md);
  --zendd-input-min-block-size: var(--zendd-layout-touch-target-min);
  --zendd-skip-link-font-size: var(--zendd-font-size-sm);
  --zendd-skip-link-padding: var(--zendd-space-2) var(--zendd-space-4);
  --zendd-skip-link-z-index: var(--zendd-z-index-toast);
  --zendd-page-header-title-font-size: var(--zendd-font-size-2xl);
  --zendd-page-header-title-font-family: var(--zendd-font-family-heading);
  --zendd-page-header-title-color: var(--zendd-text-primary);
  --zendd-page-header-subtitle-font-size: var(--zendd-font-size-base);
  --zendd-page-header-subtitle-color: var(--zendd-text-secondary);
  --zendd-breadcrumb-font-size: var(--zendd-font-size-sm);
  --zendd-breadcrumb-color: var(--zendd-text-secondary);
  --zendd-breadcrumb-active-color: var(--zendd-text-primary);
  --zendd-breadcrumb-separator-color: var(--zendd-text-tertiary);
  --zendd-accordion-border-color: var(--zendd-border-default);
  --zendd-accordion-border-radius: var(--zendd-radius-lg);
  --zendd-accordion-padding: var(--zendd-space-4);
  --zendd-accordion-hover-border-color: var(--zendd-border-strong);
  --zendd-dialog-border-radius: var(--zendd-radius-xl);
  --zendd-dialog-shadow: var(--zendd-shadow-xl);
  --zendd-dialog-padding: var(--zendd-space-6);
  --zendd-notification-border-radius: var(--zendd-radius-lg);
  --zendd-notification-padding: var(--zendd-space-4);
  --zendd-notification-shadow: var(--zendd-shadow-lg);
  --zendd-progress-list-pending-color: var(--zendd-color-navy-200);
  --zendd-progress-list-pending-text-color: var(--zendd-color-navy-500);
  --zendd-button-primary-action-background-color: var(--zendd-action-primary-color);
  --zendd-button-primary-action-color: var(--zendd-text-on-primary);
  --zendd-button-primary-action-hover-background: var(--zendd-action-primary-hover);
  --zendd-button-success-background-color: var(--zendd-feedback-success-color);
  --zendd-button-success-color: var(--zendd-text-on-success);
  --zendd-button-success-hover-background: var(--zendd-feedback-success-hover);
  --zendd-button-danger-background-color: var(--zendd-feedback-danger-color);
  --zendd-button-danger-color: var(--zendd-text-on-danger);
  --zendd-button-danger-hover-background: var(--zendd-feedback-danger-hover);
  --zendd-button-warning-background-color: var(--zendd-feedback-warning-color);
  --zendd-button-warning-hover-background: var(--zendd-feedback-warning-hover);
  --zendd-button-secondary-color: var(--zendd-action-primary-color);
  --zendd-button-secondary-border-color: var(--zendd-action-primary-color);
  --zendd-button-secondary-hover-background: var(--zendd-action-primary-light);
  --zendd-badge-primary-background-color: var(--zendd-action-primary-light);
  --zendd-badge-success-background-color: var(--zendd-feedback-success-light);
  --zendd-badge-warning-background-color: var(--zendd-feedback-warning-light);
  --zendd-badge-danger-background-color: var(--zendd-feedback-danger-light);
  --zendd-badge-info-background-color: var(--zendd-feedback-info-light);
  --zendd-card-background-color: var(--zendd-surface-primary);
  --zendd-sidenav-item-hover-color: var(--zendd-text-inverse);
  --zendd-sidenav-item-active-background-color: var(--zendd-action-primary-color);
  --zendd-sidenav-item-active-color: var(--zendd-text-inverse);
  --zendd-alert-success-background-color: var(--zendd-feedback-success-light);
  --zendd-alert-success-border-color: var(--zendd-border-success);
  --zendd-alert-warning-background-color: var(--zendd-feedback-warning-light);
  --zendd-alert-warning-border-color: var(--zendd-border-warning);
  --zendd-alert-danger-background-color: var(--zendd-feedback-danger-light);
  --zendd-alert-danger-border-color: var(--zendd-border-danger);
  --zendd-alert-info-background-color: var(--zendd-feedback-info-light);
  --zendd-alert-info-border-color: var(--zendd-border-info);
  --zendd-input-focus-border-color: var(--zendd-border-focus);
  --zendd-input-error-border-color: var(--zendd-border-danger);
  --zendd-skip-link-background-color: var(--zendd-action-primary-color);
  --zendd-skip-link-color: var(--zendd-text-on-primary);
  --zendd-accordion-background-color: var(--zendd-surface-primary);
  --zendd-spinner-color: var(--zendd-action-primary-color);
  --zendd-dialog-background-color: var(--zendd-surface-primary);
  --zendd-progress-list-done-color: var(--zendd-feedback-success-color);
  --zendd-progress-list-active-color: var(--zendd-action-primary-color);
  --zendd-progress-list-active-ring-color: var(--zendd-action-primary-light);
  --zendd-progress-list-error-color: var(--zendd-feedback-danger-color);

  /* Werkbank: volzin-highlight */
  --zendd-werkbank-volzin-bg: var(--zendd-surface-primary);
  --zendd-werkbank-volzin-border: var(--zendd-border-default);
  --zendd-werkbank-volzin-hover-bg: var(--zendd-color-navy-50);
  --zendd-werkbank-volzin-selected-bg: var(--zendd-color-sky-50);
  --zendd-werkbank-volzin-selected-border: var(--zendd-color-sky-400);

  /* Werkbank: classificatie-kleuren */
  --zendd-werkbank-cls-attestatie-bg: var(--zendd-color-green-50);
  --zendd-werkbank-cls-attestatie-border: var(--zendd-color-green-400);
  --zendd-werkbank-cls-context-bg: var(--zendd-color-sky-50);
  --zendd-werkbank-cls-context-border: var(--zendd-color-sky-400);
  --zendd-werkbank-cls-menselijke-maat-bg: var(--zendd-color-amber-50);
  --zendd-werkbank-cls-menselijke-maat-border: var(--zendd-color-amber-400);
  --zendd-werkbank-cls-buiten-scope-bg: var(--zendd-color-navy-50);
  --zendd-werkbank-cls-buiten-scope-border: var(--zendd-color-navy-300);

  /* Werkbank: volzin-card chip-kleuren (WCAG 4.5:1 verified) */
  --zendd-werkbank-chip-betrokkene-bg: var(--zendd-color-purple-100);
  --zendd-werkbank-chip-betrokkene-text: var(--zendd-color-purple-800);
  --zendd-werkbank-chip-voorwaarde-bg: var(--zendd-color-sky-100);
  --zendd-werkbank-chip-voorwaarde-text: var(--zendd-color-sky-800);
  --zendd-werkbank-chip-toetsregel-bg: var(--zendd-color-navy-100);
  --zendd-werkbank-chip-toetsregel-text: var(--zendd-color-navy-800);
  --zendd-werkbank-chip-norm-bg: var(--zendd-color-amber-100);
  --zendd-werkbank-chip-norm-text: var(--zendd-color-amber-900);

  /* Werkbank: nadruk-markering */
  --zendd-werkbank-nadruk-bg: var(--zendd-color-purple-50);
  --zendd-werkbank-nadruk-border-bottom: var(--zendd-color-purple-300);

  /* Werkbank: completeness-indicator */
  --zendd-werkbank-complete-filled: var(--zendd-color-green-500);
  --zendd-werkbank-complete-empty: var(--zendd-color-navy-200);

  /* Werkbank: referentie-link types */
  --zendd-werkbank-ref-intref-color: var(--zendd-color-sky-600);
  --zendd-werkbank-ref-extref-color: var(--zendd-color-purple-600);
  --zendd-werkbank-ref-textmatch-color: var(--zendd-color-amber-600);
  --zendd-werkbank-ref-unresolved-color: var(--zendd-color-navy-400);

  /* Werkbank: autoriteits-indicator (Sprint 4) */
  --zendd-werkbank-autoriteit-code-bg: var(--zendd-color-sky-100);
  --zendd-werkbank-autoriteit-code-color: var(--zendd-color-sky-700);
  --zendd-werkbank-autoriteit-ai-bg: var(--zendd-color-purple-100);
  --zendd-werkbank-autoriteit-ai-color: var(--zendd-color-purple-700);
  --zendd-werkbank-autoriteit-mens-bg: var(--zendd-color-amber-100);
  --zendd-werkbank-autoriteit-mens-color: var(--zendd-color-amber-700);

  /* Werkbank: multi-lens arcering (TO-multi-lens-werkbank-arcering v0.2.0) */
  --zendd-wb-mark-betrokkene: var(--zendd-color-green-500);
  --zendd-wb-mark-eigenschap: var(--zendd-color-sky-400);
  --zendd-wb-mark-grondslag: var(--zendd-color-purple-500);
  --zendd-wb-mark-exclusie: var(--zendd-color-coral-500);
  --zendd-wb-mark-normwaarde: var(--zendd-color-amber-500);
  --zendd-wb-mark-normkenmerk: var(--zendd-color-amber-400);
  --zendd-wb-mark-betrokkene-bg: var(--zendd-color-green-50);
  --zendd-wb-mark-eigenschap-bg: var(--zendd-color-sky-50);
  --zendd-wb-mark-grondslag-bg: var(--zendd-color-purple-50);
  --zendd-wb-mark-exclusie-bg: var(--zendd-color-coral-50);
  --zendd-wb-mark-norm-bg: var(--zendd-color-amber-50);

  /* Werkbank: US-NORMEN-01 annotatie-badges */
  --zendd-wb-ann-voorwaarde: var(--zendd-color-purple-500);
  --zendd-wb-ann-voorwaarde-bg: var(--zendd-color-purple-50);
  --zendd-wb-ann-exclusie: var(--zendd-color-coral-500);
  --zendd-wb-ann-exclusie-bg: var(--zendd-color-coral-50);
  --zendd-wb-ann-norm: var(--zendd-color-amber-500);
  --zendd-wb-ann-norm-bg: var(--zendd-color-amber-50);
  --zendd-wb-ann-attestatie: var(--zendd-color-green-600);
  --zendd-wb-ann-attestatie-bg: var(--zendd-color-green-50);
  --zendd-wb-ann-berekening: var(--zendd-color-amber-700);
  --zendd-wb-ann-berekening-bg: var(--zendd-color-amber-100);
  --zendd-wb-ann-nader: var(--zendd-color-gray-400);
  --zendd-wb-ann-nader-bg: var(--zendd-color-gray-50);
}

/* ============================================================
   Fase D utility classes — inline style extractie
   ============================================================ */

/* Spacing */
.zendd-mt-4 { margin-block-start: var(--zendd-space-4); }
.zendd-card--spaced { margin-block-start: var(--zendd-space-4); }

/* Step badge (trechter funnel numbered steps) */
.zendd-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 10px;
  border-radius: 9999px;
  font-weight: 600;
}
.zendd-step-badge--primary {
  background-color: var(--zendd-action-primary-color);
  color: var(--zendd-text-on-primary);
}
.zendd-step-badge--muted {
  background-color: var(--zendd-color-purple-200);
  color: var(--zendd-color-purple-800);
}

/* Trechter funnel bars */
.zendd-trechter-bar {
  padding: var(--zendd-space-2) var(--zendd-space-3);
  border-radius: var(--zendd-radius-md);
  font-size: var(--zendd-font-size-sm);
  font-weight: 600;
  text-align: center;
}
.zendd-trechter-bar--primary {
  background-color: var(--zendd-action-primary-light);
  color: var(--zendd-action-primary-color);
  border: 1px solid var(--zendd-action-primary-muted);
}
.zendd-trechter-bar--info {
  background-color: var(--zendd-feedback-info-light);
  color: var(--zendd-color-sky-800);
  border: 1px solid var(--zendd-border-info);
}
.zendd-trechter-bar--warning {
  background-color: var(--zendd-feedback-warning-light);
  color: var(--zendd-feedback-warning-dark);
  border: 1px solid var(--zendd-border-warning);
}
.zendd-trechter-bar--success {
  background-color: var(--zendd-feedback-success-light);
  color: var(--zendd-feedback-success-color);
  border: 2px solid var(--zendd-border-success);
}

/* Funnel arrows (CSS triangle) */
.zendd-funnel-arrow {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}
.zendd-funnel-arrow--primary { border-top: 10px solid var(--zendd-action-primary-muted); }
.zendd-funnel-arrow--info { border-top: 10px solid var(--zendd-border-info); }
.zendd-funnel-arrow--warning { border-top: 10px solid var(--zendd-border-warning); }
.zendd-funnel-arrow--success { border-top: 10px solid var(--zendd-border-success); }

/* Border utilities */
.zendd-border-accent-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: var(--zendd-action-primary-color);
}
.zendd-dashed-placeholder {
  border: 2px dashed var(--zendd-border-default);
}

/* Dark panel (Mermaid/preview area) */
.zendd-dark-panel {
  background-color: var(--zendd-surface-darker);
  border: 1px solid var(--zendd-color-navy-700);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.zendd-dark-panel-header {
  color: var(--zendd-color-navy-300);
  font-size: var(--zendd-font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.zendd-dark-panel-subtitle {
  font-size: var(--zendd-font-size-xs);
  color: var(--zendd-color-navy-400);
  border-bottom: 1px solid var(--zendd-color-navy-700);
}
.zendd-dark-panel-body {
  background-color: var(--zendd-surface-dark);
}
.zendd-dark-panel-empty {
  font-size: var(--zendd-font-size-sm);
  color: var(--zendd-color-navy-500);
}

/* Trechter rail utilities */
.zendd-trechter-rail-label {
  font-size: var(--zendd-font-size-xs);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.zendd-trechter-rail-sublabel {
  font-size: var(--zendd-font-size-xs);
  color: var(--zendd-text-secondary);
  text-align: center;
  max-width: 8rem;
  line-height: 1.3;
}
.zendd-trechter-rail-summary {
  text-align: center;
  margin-block-start: var(--zendd-space-2);
}
.zendd-trechter-rail-summary-title {
  font-size: var(--zendd-font-size-sm);
  font-weight: 600;
  color: var(--zendd-action-primary-color);
}
.zendd-trechter-rail-summary-sub {
  font-size: var(--zendd-font-size-xs);
  color: var(--zendd-text-secondary);
}

/* Delete button compact */
.zendd-button--icon-only {
  padding: var(--zendd-space-1);
}

/* Success card border */
.zendd-card--success {
  border-color: var(--zendd-border-success);
}

/* Link-colored text (for summary/details) */
.zendd-text-link {
  color: var(--zendd-text-link);
}

/* Checkbox accent */
.zendd-checkbox-accent {
  accent-color: var(--zendd-action-primary-color);
}

/* Text line-height relaxed */
.zendd-leading-relaxed {
  line-height: 1.6;
}

/* Icon container backgrounds */
.zendd-icon-bg-warning {
  background-color: var(--zendd-feedback-warning-light);
}

/* Audit dots — warning variant */
.zendd-audit-dot--warning {
  background-color: var(--zendd-feedback-warning-color);
}

/* Dark panel border-bottom separator */
.zendd-dark-panel-separator {
  border-bottom: 1px solid var(--zendd-color-navy-700);
}

/* Dark panel ghost button */
.zendd-dark-panel-ghost {
  color: var(--zendd-color-navy-400);
}

/* Law content reader */
.zendd-law-content {
  font-size: var(--zendd-font-size-sm);
  color: var(--zendd-color-navy-300);
  font-family: var(--zendd-font-family-body);
  line-height: 1.75;
}

/* JSON viewer */
.zendd-json-viewer {
  background-color: var(--zendd-surface-darker);
}
.zendd-json-pre {
  font-size: 13px;
  color: var(--zendd-color-navy-300);
}
.zendd-code-hint {
  font-size: 10px;
}

/* Step badge amber variant */
.zendd-step-badge--amber {
  background-color: var(--zendd-color-amber-200);
  color: var(--zendd-color-amber-800);
}

/* Success muted icon color */
.zendd-text-success-muted {
  color: var(--zendd-feedback-success-muted);
}

/* Compact input override (kanban) */
.zendd-input--compact {
  min-block-size: auto;
  padding-block: 0.25rem;
}
.zendd-select--compact {
  min-block-size: auto;
  padding: 0.25rem 0.5rem;
}

/* Treintjes preview panel */
.zendd-preview-panel {
  font-size: var(--zendd-font-size-sm);
  background-color: var(--zendd-surface-secondary);
  border: 1px solid var(--zendd-border-default);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
}

/* Warning accent checkbox */
.zendd-checkbox-warning {
  accent-color: var(--zendd-feedback-warning-color);
}

/* Input with leading icon — overrides padding shorthand */
.zendd-input--with-icon {
  padding-left: 2.25rem;
}

/* ============================================================
   TO-2 S2: Card & Input BEM componenten (burger-aanvraag)
   Tokens-only — geen HEX (Law 014, ADR-041).
   WCAG 2.2 AA: 44px touch targets, focus-visible, contrast 4.5:1.
   ============================================================ */

/* --- Card Set (keychain groepering) --- */

.zendd-card-set {
  border: 1px solid var(--zendd-border-default);
  border-radius: var(--zendd-radius-xl);
  background-color: var(--zendd-surface-primary);
  box-shadow: var(--zendd-shadow-sm);
  overflow: hidden;
}

.zendd-card-set__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--zendd-space-3) var(--zendd-space-4);
  border-block-end: 1px solid var(--zendd-border-light);
  background-color: var(--zendd-surface-secondary);
}

.zendd-card-set__title {
  display: flex;
  align-items: center;
  gap: var(--zendd-space-2);
  min-width: 0;
}

.zendd-card-set__icon {
  font-size: var(--zendd-font-size-xl);
  flex-shrink: 0;
}

.zendd-card-set__naam {
  font-family: var(--zendd-font-family-heading);
  font-size: var(--zendd-font-size-base);
  font-weight: 600;
  color: var(--zendd-text-primary);
  margin: 0;
}

.zendd-card-set__teller {
  font-size: var(--zendd-font-size-xs);
  font-family: var(--zendd-font-family-mono);
  color: var(--zendd-text-tertiary);
  flex-shrink: 0;
}

.zendd-card-set__bron-keuze {
  display: flex;
  gap: var(--zendd-space-3);
  padding: var(--zendd-space-3) var(--zendd-space-4);
  border-block-end: 1px solid var(--zendd-border-light);
  background-color: var(--zendd-surface-secondary);
}

.zendd-card-set__bron-optie {
  display: flex;
  align-items: center;
  gap: var(--zendd-space-2);
  cursor: pointer;
  min-block-size: var(--zendd-layout-touch-target-min);
}

.zendd-card-set__cards {
  display: flex;
  flex-direction: column;
}

/* --- Card variants (auto / half-auto / manual) --- */

.zendd-card--auto,
.zendd-card--half-auto,
.zendd-card--manual {
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--zendd-surface-primary);
}

/* W-1: voorkom hover-shadow bleed-through van base .zendd-card */
.zendd-card--auto:hover,
.zendd-card--half-auto:hover,
.zendd-card--manual:hover {
  box-shadow: none;
}

.zendd-card--auto {
  border-inline-start: 3px solid var(--zendd-feedback-success-color);
}

.zendd-card--auto[aria-busy="true"] {
  border-inline-start-color: var(--zendd-feedback-info-color);
}

.zendd-card--half-auto {
  border-inline-start: 3px solid var(--zendd-feedback-info-color);
}

.zendd-card--manual {
  border-inline-start: 3px solid var(--zendd-action-primary-color);
}

/* --- Card field (shared input wrapper) --- */

.zendd-card__field {
  padding: var(--zendd-space-3) var(--zendd-space-4);
  border-block-end: 1px solid var(--zendd-border-light);
}

.zendd-card__field:last-child {
  border-block-end: none;
}

.zendd-card__field--address {
  border: none;
  margin: 0;
  padding: var(--zendd-space-3) var(--zendd-space-4);
}

.zendd-card__label {
  display: block;
  font-size: var(--zendd-font-size-sm);
  font-weight: 600;
  color: var(--zendd-text-primary);
  margin-block-end: var(--zendd-space-1);
}

.zendd-card__sublabel {
  display: block;
  font-size: var(--zendd-font-size-xs);
  font-weight: 500;
  color: var(--zendd-text-secondary);
  margin-block-end: var(--zendd-space-1);
}

.zendd-card__description {
  font-size: var(--zendd-font-size-xs);
  color: var(--zendd-text-secondary);
  margin: 0 0 var(--zendd-space-2) 0;
  line-height: 1.4;
}

.zendd-card__hint {
  font-size: var(--zendd-font-size-xs);
  color: var(--zendd-text-tertiary);
  margin: var(--zendd-space-1) 0 0 0;
}

/* --- Card value (auto-retrieved display) --- */

.zendd-card__value {
  display: flex;
  align-items: center;
  gap: var(--zendd-space-2);
  font-size: var(--zendd-font-size-sm);
  min-block-size: var(--zendd-layout-touch-target-min);
}

.zendd-card__value--filled {
  color: var(--zendd-feedback-success-color);
  font-weight: 600;
}

.zendd-card__value--pending {
  color: var(--zendd-text-tertiary);
  font-style: italic;
}

.zendd-card__check {
  color: var(--zendd-feedback-success-color);
  font-weight: 700;
}

.zendd-card__spinner {
  display: inline-block;
  width: var(--zendd-spinner-size);
  height: var(--zendd-spinner-size);
  border: var(--zendd-spinner-border-width) solid var(--zendd-border-default);
  border-block-start-color: var(--zendd-spinner-color);
  border-radius: var(--zendd-radius-full);
  animation: zendd-spin 0.8s linear infinite;
}

@keyframes zendd-spin {
  to { transform: rotate(360deg); }
}

.zendd-card__bron {
  font-size: var(--zendd-font-size-xs);
  color: var(--zendd-text-secondary);
  margin: var(--zendd-space-1) 0 0 0;
}

/* --- Input: text / number / date / currency --- */

.zendd-card__input {
  display: block;
  width: 100%;
  min-block-size: var(--zendd-layout-touch-target-min);
  padding: var(--zendd-input-padding);
  font-family: var(--zendd-font-family-body);
  font-size: var(--zendd-input-font-size);
  color: var(--zendd-text-primary);
  background-color: var(--zendd-surface-primary);
  border: 1px solid var(--zendd-input-border-color);
  border-radius: var(--zendd-input-border-radius);
  transition: border-color var(--zendd-transition-fast),
              box-shadow var(--zendd-transition-fast);
}

.zendd-card__input:focus-visible {
  outline: none;
  border-color: var(--zendd-input-focus-border-color);
  box-shadow: 0 0 0 3px var(--zendd-input-focus-ring-color);
}

.zendd-card__input--date {
  font-family: var(--zendd-font-family-body);
}

.zendd-card__input--currency {
  padding-inline-start: 0;
  border-inline-start: none;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* --- Input group (prefix + input, e.g. currency) --- */

.zendd-card__input-group {
  display: flex;
  align-items: stretch;
}

.zendd-card__input-prefix {
  display: flex;
  align-items: center;
  padding-inline: var(--zendd-space-3);
  font-size: var(--zendd-font-size-sm);
  font-weight: 600;
  color: var(--zendd-text-secondary);
  background-color: var(--zendd-surface-tertiary);
  border: 1px solid var(--zendd-input-border-color);
  border-inline-end: none;
  border-start-start-radius: var(--zendd-input-border-radius);
  border-end-start-radius: var(--zendd-input-border-radius);
}

/* --- Input: select (dropdown) --- */

.zendd-card__select {
  display: block;
  width: 100%;
  min-block-size: var(--zendd-layout-touch-target-min);
  padding: var(--zendd-input-padding);
  font-family: var(--zendd-font-family-body);
  font-size: var(--zendd-input-font-size);
  color: var(--zendd-text-primary);
  background-color: var(--zendd-surface-primary);
  border: 1px solid var(--zendd-input-border-color);
  border-radius: var(--zendd-input-border-radius);
  cursor: pointer;
  transition: border-color var(--zendd-transition-fast),
              box-shadow var(--zendd-transition-fast);
}

.zendd-card__select:focus-visible {
  outline: none;
  border-color: var(--zendd-input-focus-border-color);
  box-shadow: 0 0 0 3px var(--zendd-input-focus-ring-color);
}

/* --- Input: boolean radio group --- */

.zendd-card__radio-group {
  display: flex;
  gap: var(--zendd-space-3);
  margin-block-start: var(--zendd-space-2);
}

.zendd-card__radio-option {
  display: flex;
  align-items: center;
  gap: var(--zendd-space-2);
  cursor: pointer;
  min-block-size: var(--zendd-layout-touch-target-min);
  padding: var(--zendd-space-2) var(--zendd-space-3);
  border: 1px solid var(--zendd-input-border-color);
  border-radius: var(--zendd-input-border-radius);
  background-color: var(--zendd-surface-primary);
  transition: border-color var(--zendd-transition-fast),
              background-color var(--zendd-transition-fast);
}

.zendd-card__radio-option:hover {
  border-color: var(--zendd-border-strong);
  background-color: var(--zendd-surface-secondary);
}

.zendd-card__radio-option:has(.zendd-card__radio:checked) {
  border-color: var(--zendd-action-primary-color);
  background-color: var(--zendd-action-primary-light);
}

.zendd-card__radio {
  width: var(--zendd-radio-size);
  height: var(--zendd-radio-size);
  accent-color: var(--zendd-action-primary-color);
  cursor: pointer;
  flex-shrink: 0;
}

.zendd-card__radio-label {
  font-size: var(--zendd-font-size-sm);
  font-weight: 500;
  color: var(--zendd-text-primary);
  cursor: pointer;
}

/* --- Input: address (postcode + huisnummer) --- */

.zendd-card__address-row {
  display: flex;
  gap: var(--zendd-space-3);
}

.zendd-card__address-col {
  display: flex;
  flex-direction: column;
}

.zendd-card__address-col--postcode {
  flex: 3;
}

.zendd-card__address-col--huisnr {
  flex: 2;
}

/* --- Validation states (W-2: WCAG 3.3.1 Error Identification) --- */

.zendd-card__input:user-invalid,
.zendd-card__select:user-invalid {
  border-color: var(--zendd-input-error-border-color);
  box-shadow: 0 0 0 3px var(--zendd-input-error-ring-color);
}

.zendd-card__input:user-invalid:focus-visible,
.zendd-card__select:user-invalid:focus-visible {
  border-color: var(--zendd-input-error-border-color);
  box-shadow: 0 0 0 3px var(--zendd-input-error-ring-color);
}

/* --- Card Set modifier: standalone (geen keychain header) --- */

.zendd-card-set--standalone {
  border-radius: var(--zendd-radius-lg);
}

.zendd-card-set--standalone > .zendd-card-set__header {
  display: none;
}

/* --- Aanvraag Frame (laag-container) --- */

.zendd-aanvraag-frame {
  display: flex;
  flex-direction: column;
  gap: var(--zendd-space-4);
  max-width: 40rem;
  margin-inline: auto;
}

.zendd-aanvraag-frame__header {
  padding: var(--zendd-space-4) 0;
}

.zendd-aanvraag-frame__heading {
  font-family: var(--zendd-font-family-heading);
  font-size: var(--zendd-font-size-2xl);
  font-weight: 700;
  color: var(--zendd-text-primary);
  margin: 0 0 var(--zendd-space-2) 0;
}

.zendd-aanvraag-frame__uitleg {
  font-size: var(--zendd-font-size-base);
  color: var(--zendd-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.zendd-aanvraag-frame__privacy {
  padding: var(--zendd-space-3) var(--zendd-space-4);
  background-color: var(--zendd-feedback-info-light);
  border: 1px solid var(--zendd-border-info);
  border-radius: var(--zendd-radius-lg);
}

.zendd-aanvraag-frame__privacy p {
  font-size: var(--zendd-font-size-sm);
  color: var(--zendd-text-primary);
  margin: var(--zendd-space-1) 0 0 0;
  line-height: 1.5;
}

.zendd-aanvraag-frame__privacy-titel {
  font-family: var(--zendd-font-family-heading);
  font-size: var(--zendd-font-size-base);
  font-weight: 600;
  color: var(--zendd-text-primary);
  margin: 0;
}

.zendd-aanvraag-frame__actions {
  display: flex;
  justify-content: flex-end;
  padding-block-start: var(--zendd-space-4);
}

.zendd-aanvraag-frame__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--zendd-space-2);
  min-block-size: var(--zendd-layout-touch-target-min);
  padding: var(--zendd-button-padding-block) var(--zendd-space-6);
  font-family: var(--zendd-button-font-family);
  font-size: var(--zendd-button-font-size);
  font-weight: var(--zendd-button-font-weight);
  color: var(--zendd-button-primary-action-color);
  background-color: var(--zendd-button-primary-action-background-color);
  border: none;
  border-radius: var(--zendd-button-border-radius);
  cursor: pointer;
  transition: background-color var(--zendd-transition-fast);
}

.zendd-aanvraag-frame__submit:hover {
  background-color: var(--zendd-button-primary-action-hover-background);
}

.zendd-aanvraag-frame__submit:focus-visible {
  outline: var(--zendd-focus-outline-width) solid var(--zendd-focus-outline-color);
  outline-offset: var(--zendd-focus-outline-offset);
}

.zendd-aanvraag-frame__submit-text {
  /* Tekst label */
}

.zendd-aanvraag-frame__spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: var(--zendd-radius-full);
  animation: zendd-spin 0.8s linear infinite;
}

.htmx-request .zendd-aanvraag-frame__spinner {
  display: inline-block;
}