/* Tokens van de Contentplanner, gelijk aan de variabelen in het Figma-bestand "VDK Contentplanner · vormgeving"
   (collecties Context en Spacing, tekststijlen). Namen volgen het VDK Groep-designsystem (tokens.css daar).
   Alleen de Light-modus; het portaal heeft geen donkere stand.

   Stijl per klant (lib/stijl.js): ik().lidmaatschappen[].stijl blijft werken met de oude namen (--color-primary, --color-ink, ...).
   Elke context-variabele hieronder leest eerst de oude klantvariabele en valt daarna terug op de DS-waarde,
   zodat een bestaande `stijl` niets breekt. Nieuwe klantstijlen mogen ook rechtstreeks --ctx-* zetten. */

:root {
  /* ---------- Context · oppervlak, tekst, rand ---------- */
  --ctx-surface-default: var(--color-paper, #ffffff);
  --ctx-surface-raised: var(--color-paper, #ffffff);
  --ctx-surface-sunken: var(--color-surface, #f5f6f8);
  --ctx-text-default: var(--color-ink, #00244d);
  --ctx-text-muted: #1f3e62;
  --ctx-text-subtle: var(--color-muted, #405b7a);
  --ctx-text-disabled: #8092a6;
  --ctx-icon-default: var(--color-ink, #00244d);
  --ctx-icon-muted: #818180;
  --ctx-border-subtle: #f0f0f0;
  --ctx-border-default: var(--color-line, #e1e1e1);
  --ctx-border-strong: var(--color-ink, #00244d);

  /* ---------- Context · acties ---------- */
  --ctx-action-primary-bg: var(--color-ink, #00244d);
  --ctx-action-primary-bg-hover: var(--color-navy, #1f3e62);
  --ctx-action-primary-bg-pressed: #001936;
  --ctx-action-primary-text: var(--color-on-dark, #ffffff);
  --ctx-action-primary-border: #00244d00;
  --ctx-action-secondary-bg: #f5f6f8;
  --ctx-action-secondary-bg-hover: #e6e9ed;
  --ctx-action-secondary-bg-pressed: #ccd3db;
  --ctx-action-secondary-text: var(--color-ink, #00244d);
  --ctx-action-outline-bg: #00244d00;
  --ctx-action-outline-bg-hover: #00244d1a;
  --ctx-action-outline-bg-pressed: #00244d33;
  --ctx-action-outline-border: var(--color-line-strong, #00244d99);
  --ctx-action-disabled-bg: #f0f0f0;
  --ctx-action-disabled-text: #8092a6;
  --ctx-link-default: var(--color-ink, #00244d);
  --ctx-link-hover: #1f3e62;

  /* ---------- Context · velden en bediening ---------- */
  --ctx-focus-ring: var(--color-secondary, #2878ab);
  --ctx-field-bg: var(--color-paper, #ffffff);
  --ctx-field-border: #617791;
  --ctx-field-border-hover: var(--color-ink, #00244d);
  --ctx-field-text: var(--color-ink, #00244d);
  --ctx-field-placeholder: #405b7a;
  --ctx-control-checked: var(--color-secondary, #2878ab);
  --ctx-control-check-mark: #ffffff;
  --ctx-control-track-off: #617791;
  --ctx-control-knob: #ffffff;

  /* ---------- Context · feedback, badges ---------- */
  --ctx-feedback-error: var(--color-danger, #e52322);
  --ctx-feedback-error-text: #bc1d1c;
  --ctx-feedback-error-bg: #fdf2f2;
  --ctx-feedback-info-text: #206089;
  --ctx-feedback-info-bg: #f3f8fc;
  --ctx-feedback-success-text: var(--color-good, #3b5c15);
  --ctx-feedback-success-bg: var(--color-good-bg, #f7fbf2);
  --ctx-feedback-warning-text: var(--color-warn, #574b00);
  --ctx-feedback-warning-bg: var(--color-warn-bg, #fffdf0);
  --ctx-badge-sale: #bc1d1c;
  --ctx-badge-text: #ffffff;
  --ctx-badge-success: #f7fbf2;
  --ctx-badge-success-text: #3b5c15;
  --ctx-inverse-bg: var(--color-ink, #00244d);
  --ctx-inverse-text: var(--color-on-dark, #ffffff);
  --ctx-overlay-scrim: #00000066;

  /* ---------- Context · portaal ---------- */
  --ctx-format-0: #c3cad5;
  --ctx-format-1: #3192d0;
  --ctx-format-2: #00b6ed;
  --ctx-format-3: #e94e1b;
  --ctx-format-4: #2d3077;
  --ctx-format-5: #76b82a;
  --ctx-format-6: #f39325;
  --ctx-format-7: #e52322;
  --ctx-format-8: #598921;
  --ctx-agenda-bg: #eef1f6;
  --ctx-agenda-border: #b9c2d2;
  --ctx-header-bg: var(--color-ink, #00244d);
  --ctx-header-text: var(--color-on-dark, #ffffff);
  --ctx-header-text-muted: #ccd3db;
  --ctx-header-active-bg: #ffffff33;
  --ctx-header-hover-bg: #ffffff1a;
  --ctx-header-accent: var(--color-primary, #00b6ed);
  --ctx-radar-bg: #f3f8fc;
  --ctx-radar-border: var(--color-primary, #00b6ed);
  --ctx-status-neutraal: #8092a6;
  --ctx-status-info: #3192d0;
  --ctx-status-succes: #619722;
  --ctx-status-aandacht: #ccb100;
  --ctx-status-fout: #e52322;
  --ctx-status-vdk: #00244d;

  /* Formatkleuren per format (de JS leest --palet-N; een klantstijl mag die zetten) */
  --palet-0: var(--ctx-format-0);
  --palet-1: var(--ctx-format-1); --palet-2: var(--ctx-format-2); --palet-3: var(--ctx-format-3);
  --palet-4: var(--ctx-format-4); --palet-5: var(--ctx-format-5); --palet-6: var(--ctx-format-6);
  --palet-7: var(--ctx-format-7); --palet-8: var(--ctx-format-8);

  /* ---------- Spacing ---------- */
  --space-gap-none: 0; --space-padding-none: 0;
  --space-gap-3xs: 2px; --space-padding-3xs: 2px;
  --space-gap-2xs: 4px; --space-padding-2xs: 4px;
  --space-gap-xs: 8px; --space-padding-xs: 8px;
  --space-gap-s: 12px; --space-padding-s: 12px;
  --space-gap-m: 16px; --space-padding-m: 16px;
  --space-gap-l: 20px; --space-padding-l: 20px;
  --space-gap-xl: 24px; --space-padding-xl: 24px;
  --space-gap-2xl: 32px; --space-padding-2xl: 32px;
  --space-gap-3xl: 40px; --space-padding-3xl: 40px;
  --space-gap-4xl: 48px; --space-padding-4xl: 48px;
  --space-padding-5xl: 64px;
  --space-padding-6xl: 80px;
  --space-padding-7xl: 96px;
  --space-padding-8xl: 120px;
  --space-padding-page: 160px;
  --space-radius-none: 0;
  --space-radius-chip: 4px;
  --space-radius-control: var(--radius-knop, 8px);
  --space-radius-surface: var(--radius-paneel, 16px);
  --space-radius-card: 24px;
  --space-radius-large: 16px;
  --space-radius-xlarge: 40px;
  --space-radius-pill: 999px;
  --space-border-width-default: 1px;
  --space-border-width-emphasis: 2px;
  --size-button-l: 56px;
  --size-button-m: 48px;
  --size-button-s: 44px;
  --size-input: 56px;
  --size-touch-min: 44px;
  --size-field-compact: 44px;
  --size-sidebar: 72px;

  /* ---------- Lettertypen en tekststijlen ----------
     In de app is de lopende tekst een systeemlettertype (Bram, 2026-11-07); Power Grotesk voor koppen. */
  --font-family-display: var(--font-display, "Power Grotesk", system-ui, sans-serif);
  --font-family-body: var(--font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  --font-weight-regular: 400;
  --font-weight-strong: 600;

  --text-h4-size: 48px;   --text-h4-line: 53px;  --text-h4-tracking: .02em;
  --text-h5-size: 24px;   --text-h5-line: 26px;
  --text-h6-size: 20px;   --text-h6-line: 22px;
  --text-body-l-size: 20px; --text-body-l-line: 32px;
  --text-body-m-size: 18px; --text-body-m-line: 29px;
  --text-body-s-size: 16px; --text-body-s-line: 26px;
  --text-caption-m-size: 14px; --text-caption-m-line: 22px;
  --text-caption-s-size: 12px; --text-caption-s-line: 19px;
  --text-button-l-size: 20px; --text-button-m-size: 16px; --text-button-s-size: 14px;
  --text-label-m-size: 16px; --text-label-m-line: 26px;
  --text-input-m-size: 16px; --text-input-m-line: 26px;

  /* Beweging (Osmo-curve) */
  --ease: cubic-bezier(0.625, 0.05, 0, 1);
  --duur-kort: .2s;
  --duur: .35s;
}