/**
 * @font-face-blok voor de plugin. Handgeschreven bron; wordt door
 * scripts/build-plugin.mjs vóór het gegenereerde tokenblok geplakt in
 * plugins/ddop-huisstijl/reference/ddop.css.
 *
 * WAAROM MEEGELEVERD EN NIET VAN GOOGLE. De huisstijl schrijft DM Sans voor.
 * Een @import of <link> naar fonts.googleapis.com stuurt het IP-adres van elke
 * bezoeker naar een derde partij, en dat botst met de eigen
 * geen-third-party-regel. De bestanden staan daarom naast deze stylesheet.
 *
 * LICENTIE. DM Sans staat onder de SIL Open Font License 1.1, die
 * herdistributie toestaat — ook gebundeld — mits de licentietekst meegaat en de
 * fonts niet los worden verkocht. De licentietekst hoort als
 * assets/fonts/OFL.txt naast de bestanden te staan.
 *
 * De paden zijn relatief aan dit bestand (reference/ddop.css), dus
 * ../assets/fonts/.
 */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/DMSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/DMSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/DMSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/DMSans-Bold.woff2") format("woff2");
}

/**
 * Gegenereerd uit tokens.json door `npm run tokens`.
 * Niet met de hand bewerken — wijzigingen gaan verloren bij de volgende build.
 */
:root {
  /* Palette — ruwe waarden */
  --palette-blue-50: #edf0f8;
  --palette-blue-100: #d4daed;
  --palette-blue-200: #afbcde;
  --palette-blue-300: #8497cd;
  --palette-blue-400: #6079be;
  --palette-blue-500: #4660aa;
  --palette-blue-600: #3c5290;
  --palette-blue-700: #1d2849;
  --palette-azure-50: #dee8fc;
  --palette-azure-100: #cbdafb;
  --palette-azure-200: #a5bff8;
  --palette-azure-300: #84a8f5;
  --palette-azure-400: #648af2;
  --palette-azure-500: #3973ef;
  --palette-azure-600: #265bd5;
  --palette-azure-700: #0f40b9;
  --palette-inverse-85: #dddfe4;
  --palette-inverse-70: #bbbec8;
  --palette-inverse-50: #8e94a4;
  --palette-inverse-40: #777e92;
  --palette-inverse-25: #565e76;
  --palette-inverse-15: #3f4864;
  --palette-green-50: #f0f9e6;
  --palette-green-100: #dbf1c5;
  --palette-green-200: #bde694;
  --palette-green-300: #99d85a;
  --palette-green-400: #7ac62f;
  --palette-green-500: #70b62b;
  --palette-green-600: #5c9523;
  --palette-green-700: #426b19;
  --palette-amber-50: #fdf3e3;
  --palette-amber-100: #fae3bd;
  --palette-amber-200: #f5cc84;
  --palette-amber-300: #f0b042;
  --palette-amber-400: #e29612;
  --palette-amber-500: #d08a11;
  --palette-amber-600: #aa710e;
  --palette-amber-700: #7b510a;
  --palette-red-50: #fde3e3;
  --palette-red-100: #f9bdbd;
  --palette-red-200: #f48585;
  --palette-red-300: #ef4343;
  --palette-red-400: #e11414;
  --palette-red-500: #ce1212;
  --palette-red-600: #a90f0f;
  --palette-red-700: #7a0b0b;
  --palette-teal-50: #def7f7;
  --palette-teal-100: #aeedec;
  --palette-teal-200: #54dede;
  --palette-teal-300: #00ced0;
  --palette-teal-400: #00bbbe;
  --palette-teal-500: #00acaf;
  --palette-teal-600: #008d8f;
  --palette-teal-700: #006567;
  --palette-violet-50: #f5edff;
  --palette-violet-100: #e8d5ff;
  --palette-violet-200: #d8b3ff;
  --palette-violet-300: #c88eff;
  --palette-violet-400: #b675f7;
  --palette-violet-500: #a76be3;
  --palette-violet-600: #8957ba;
  --palette-violet-700: #623e87;
  --palette-magenta-50: #ffebf5;
  --palette-magenta-100: #ffcfe8;
  --palette-magenta-200: #fda7d8;
  --palette-magenta-300: #f87bc7;
  --palette-magenta-400: #e860b5;
  --palette-magenta-500: #d558a6;
  --palette-magenta-600: #af4788;
  --palette-magenta-700: #7e3361;
  --palette-slate-50: #f3f4f7;
  --palette-slate-100: #e1e4ea;
  --palette-slate-200: #c9ced9;
  --palette-slate-300: #b1b8c8;
  --palette-slate-400: #8e97af;
  --palette-slate-450: #7c87a2;
  --palette-slate-500: #6a7695;
  --palette-slate-600: #474e62;
  --palette-slate-700: #2f3442;
  --palette-white: #ffffff;

  /* Tekst */
  --text-primary: var(--palette-blue-700);
  --text-secondary: var(--palette-slate-600);
  --text-muted: var(--palette-slate-500);
  --text-placeholder: var(--palette-slate-500);
  --text-link: var(--palette-blue-500);
  --text-on-dark: var(--palette-white);
  --text-on-inverse: var(--palette-white);

  /* Actie */
  --action-primary-surface: var(--palette-blue-500);
  --action-primary-surface-hover: var(--palette-blue-600);
  --action-primary-surface-active: var(--palette-blue-700);
  --action-primary-text: var(--palette-white);
  --action-primary-destructive-surface: var(--palette-red-400);
  --action-primary-destructive-surface-hover: var(--palette-red-500);
  --action-primary-destructive-surface-active: var(--palette-red-600);
  --action-primary-destructive-text: var(--palette-white);
  --action-secondary-border: var(--palette-blue-500);
  --action-secondary-text: var(--palette-blue-500);
  --action-secondary-surface-hover: var(--palette-blue-50);
  --action-secondary-border-hover: var(--palette-blue-600);
  --action-secondary-text-hover: var(--palette-blue-600);
  --action-secondary-surface-active: var(--palette-blue-100);
  --action-secondary-border-active: var(--palette-blue-700);
  --action-secondary-text-active: var(--palette-blue-700);
  --action-secondary-destructive-border: var(--palette-red-400);
  --action-secondary-destructive-text: var(--palette-red-400);
  --action-secondary-destructive-surface-hover: var(--palette-red-50);
  --action-secondary-destructive-border-hover: var(--palette-red-500);
  --action-secondary-destructive-text-hover: var(--palette-red-500);
  --action-secondary-destructive-surface-active: var(--palette-red-100);
  --action-secondary-destructive-border-active: var(--palette-red-600);
  --action-secondary-destructive-text-active: var(--palette-red-600);
  --action-tertiary-text: var(--palette-blue-500);
  --action-tertiary-text-hover: var(--palette-blue-700);
  --action-tertiary-surface-hover: var(--palette-slate-50);
  --action-tertiary-text-active: var(--palette-blue-700);
  --action-tertiary-surface-active: var(--palette-slate-100);
  --action-tertiary-destructive-text: var(--palette-red-400);
  --action-tertiary-destructive-surface-hover: var(--palette-red-50);
  --action-tertiary-destructive-text-hover: var(--palette-red-500);
  --action-tertiary-destructive-surface-active: var(--palette-red-100);
  --action-tertiary-destructive-text-active: var(--palette-red-600);
  --action-primary-on-inverse-surface: var(--palette-white);
  --action-primary-on-inverse-surface-hover: var(--palette-blue-50);
  --action-primary-on-inverse-surface-active: var(--palette-blue-100);
  --action-primary-on-inverse-text: var(--text-primary);
  --action-secondary-on-inverse-border: var(--palette-white);
  --action-secondary-on-inverse-text: var(--palette-white);
  --action-secondary-on-inverse-hover: var(--palette-inverse-15);
  --action-secondary-on-inverse-active: var(--palette-inverse-25);

  /* Accent */
  --accent: var(--palette-green-500);

  /* Vlak */
  --surface-default: var(--palette-white);
  --surface-muted: var(--palette-slate-50);
  --surface-hover: var(--palette-blue-50);
  --surface-accent: var(--palette-azure-100);
  --surface-accent-soft: var(--palette-blue-50);
  --surface-inverse: var(--palette-blue-700);
  --surface-scrim: hsl(225 43% 20% / 0.45);

  /* Rand */
  --border-subtle: var(--palette-slate-200);
  --border-strong: var(--palette-slate-450);
  --border-focus: var(--palette-blue-500);
  --border-focus-on-inverse: var(--palette-white);
  --border-on-inverse: var(--palette-inverse-15);

  /* Status */
  --status-success-surface: var(--palette-green-50);
  --status-success-text: var(--palette-green-700);
  --status-success-accent: var(--palette-green-600);
  --status-warning-surface: var(--palette-amber-50);
  --status-warning-text: var(--palette-amber-700);
  --status-warning-accent: var(--palette-amber-600);
  --status-error-surface: var(--palette-red-50);
  --status-error-text: var(--palette-red-600);
  --status-error-accent: var(--palette-red-400);
  --status-info-surface: var(--palette-slate-50);
  --status-info-text: var(--palette-slate-600);
  --status-info-accent: var(--palette-blue-500);

  /* Uitgeschakeld */
  --disabled-surface: var(--palette-slate-100);
  --disabled-text: var(--palette-slate-500);
  --disabled-border: var(--palette-slate-200);

  /* Navigatie */
  --nav-item-text: var(--text-primary);
  --nav-item-text-active: var(--palette-blue-500);
  --nav-item-text-hover: var(--palette-blue-600);
  --nav-item-surface-active: var(--palette-blue-50);

  /* Formulier */
  --input-surface: var(--surface-default);
  --input-border: var(--border-strong);
  --input-border-focus: var(--border-focus);
  --input-border-error: var(--status-error-accent);
  --input-border-valid: var(--status-success-accent);
  --input-text: var(--text-primary);
  --input-text-placeholder: var(--text-placeholder);
  --input-text-hint: var(--text-secondary);
  --input-text-error: var(--status-error-text);
  --input-icon-action: var(--text-primary);
  --input-addon-surface: var(--surface-muted);
  --input-addon-border: var(--border-subtle);
  --input-icon-meta: var(--text-muted);
  --input-surface-disabled: var(--disabled-surface);
  --input-height: 40px;

  /* Grafiek */
  --chart-1: var(--palette-green-600);
  --chart-2: var(--palette-blue-700);
  --chart-3: var(--palette-azure-700);
  --chart-4: var(--palette-magenta-500);
  --chart-5: var(--palette-amber-700);
  --chart-6: var(--palette-violet-400);

  /* Tabel */
  --table-surface-default: var(--surface-default);
  --table-surface-hover: var(--surface-hover);
  --table-surface-selected: var(--palette-blue-100);
  --table-header-border: var(--palette-slate-300);
  --table-row-border: var(--border-subtle);

  /* Badge */
  --badge-gray-surface: var(--palette-slate-50);
  --badge-gray-text: var(--palette-slate-700);
  --badge-gray-border: var(--palette-slate-600);
  --badge-blue-surface: var(--palette-blue-50);
  --badge-blue-text: var(--palette-blue-700);
  --badge-blue-border: var(--palette-blue-600);
  --badge-azure-surface: var(--palette-azure-50);
  --badge-azure-text: var(--palette-azure-700);
  --badge-azure-border: var(--palette-azure-600);
  --badge-teal-surface: var(--palette-teal-50);
  --badge-teal-text: var(--palette-teal-700);
  --badge-teal-border: var(--palette-teal-600);
  --badge-green-surface: var(--palette-green-50);
  --badge-green-text: var(--palette-green-700);
  --badge-green-border: var(--palette-green-600);
  --badge-amber-surface: var(--palette-amber-50);
  --badge-amber-text: var(--palette-amber-700);
  --badge-amber-border: var(--palette-amber-600);
  --badge-red-surface: var(--palette-red-50);
  --badge-red-text: var(--palette-red-700);
  --badge-red-border: var(--palette-red-600);
  --badge-magenta-surface: var(--palette-magenta-50);
  --badge-magenta-text: var(--palette-magenta-700);
  --badge-magenta-border: var(--palette-magenta-600);
  --badge-violet-surface: var(--palette-violet-50);
  --badge-violet-text: var(--palette-violet-700);
  --badge-violet-border: var(--palette-violet-600);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 36px;
  --radius-full: 999px;

  /* Schaduw */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  --shadow-overlay: 0 -6px 24px rgba(0,0,0,.12);
  --shadow-2xl: 0 24px 72px rgba(0,0,0,.18);

  /* Beweging */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;

  /* Stapelvolgorde */
  --z-topbar: 20;
  --z-overlay: 30;
  --z-sidebar: 40;
  --z-consent: 9999;

  /* Icoonformaten en -kleuren */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 40px;
  --icon-primary: var(--text-primary);
  --icon-secondary: var(--text-secondary);
  --icon-muted: var(--text-muted);
  --icon-link: var(--text-link);
  --icon-white: var(--palette-white);

  /* Typografie */
  --font-family: 'DM Sans', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-hero: 1.1;
  --line-height-heading: 1.2;
  --line-height-ui: 1.4;
  --line-height-button: 1.5;
  --line-height-body: 1.6;
  --heading-hero-size: 56px;
  --heading-hero-line-height: var(--line-height-hero);
  --heading-hero-letter-spacing: var(--letter-spacing-heading);
  --heading-h1-size: 40px;
  --heading-h1-line-height: var(--line-height-heading);
  --heading-h1-letter-spacing: var(--letter-spacing-heading);
  --heading-h2-size: 24px;
  --heading-h2-line-height: var(--line-height-heading);
  --heading-h2-letter-spacing: var(--letter-spacing-heading);
  --heading-h3-size: 20px;
  --heading-h3-line-height: var(--line-height-heading);
  --heading-h3-letter-spacing: var(--letter-spacing-heading);
  --heading-h4-size: 18px;
  --heading-h4-line-height: var(--line-height-heading);
  --heading-h4-letter-spacing: var(--letter-spacing-heading);
  --body-base-size: 16px;
  --body-base-line-height: var(--line-height-body);
  --body-small-size: 14px;
  --body-small-line-height: var(--line-height-body);
  --body-caption-size: 12px;
  --body-caption-line-height: var(--line-height-body);
  --ui-label-size: 14px;
  --ui-label-line-height: var(--line-height-ui);
  --ui-button-size: 16px;
  --ui-button-line-height: var(--line-height-button);
  --ui-caps-size: 16px;
  --ui-caps-line-height: var(--line-height-ui);
  --ui-caps-letter-spacing: var(--letter-spacing-caps);
  --display-size: clamp(1.75rem, 4vw, 2.25rem); /* typography.display-scale — geen h-niveau */
  --display-line-height: 1;
  --letter-spacing-heading: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-caps: 0.08em;

  /* Ruimte */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-responsive: clamp(1rem, 5vw, 2rem);

  /* Layout */
  --width-prose: 65ch;
  --width-default: 1200px;
  --width-wide: 1400px;
  --width-app-shell: 1264px;
  --width-sidebar: 248px;
  --height-topbar: 60px;
  --offset-content-top: 164px;

  /* Component — button */
  --button-height-lg: 48px;
  --button-height-md: 40px;
  --button-height-sm: 32px;
  --button-padding-inline-lg: 16px;
  --button-padding-inline-md: 12px;
  --button-padding-inline-sm: 8px;
  --button-padding-block-lg: 12px;
  --button-padding-block-md: 8px;
  --button-padding-block-sm: 6px;
  --button-font-size: var(--ui-button-size);
  --button-line-height: var(--line-height-button);
  --button-font-size-sm: var(--body-small-size);
  --button-line-height-sm: var(--line-height-ui);
}

h1,
h2,
h3,
h4 {
  letter-spacing: var(--letter-spacing-heading);
}