/* Dexx design tokens v0.6.0 (2026-10-08).
   AFGELEID BESTAND. Bron van waarheid is het Design System-artifact: https://claude.ai/artifact/Nti8FzFearafs7XntH65QD
   (project/tokens.json). Niet met de hand wijzigen: wijzig het artifact en genereer dit bestand opnieuw
   (tools/design/export-design-system.mjs, zie docs/design/README.md). */

:root {
  /* kleur, thema licht */
  --green-50: #eef6f1;
  --green-100: #d7eadf;
  --green-200: #b3d5c2;
  --green-400: #5fa884;
  --green-600: #2f7458;
  --green-700: #245441;
  --green-800: #174b3b;
  --green-900: #10271f;
  --bg: #f6f8f7;
  --surface: #ffffff;
  --surface-2: #eef1ef;
  --line: #dbe5df;
  --line-strong: #b9c6bf;
  --line-control: #7a8a82;
  --text: var(--green-900);
  --text-2: #4d5b54;
  --text-3: #5f6e67;
  --on-primary: #ffffff;
  --primary: var(--green-600);
  --primary-hover: var(--green-700);
  --primary-active: var(--green-800);
  --focus: var(--green-600);
  --selected-bg: var(--green-50);
  --hover-bg: var(--green-50);
  --selected-border: var(--green-600);
  --follows-advice: var(--green-600);
  --success: #2f7458;
  --success-bg: #e8f5ef;
  --warning: #8f5c0c;
  --warning-bg: #fdf3dc;
  --danger: #b4232f;
  --danger-bg: #fbe9ea;
  --on-danger: #ffffff;
  --info: #3d6b8f;
  --info-bg: #e6eef5;
  --on-label: var(--green-900);
  --label-1: #7aa37f;
  --label-2: #8a9bb8;
  --label-3: #c9a15d;
  --label-4: #b98a9a;
  --label-5: #8fb3b0;
  --label-6: #b3a284;
  --label-7: #9a95c2;
  --label-8: #a7b28a;
  --sidenav-bg: #eef2ef;
  --sidenav-text: var(--green-900);
  --sidenav-text-2: #4d5b54;
  --sidenav-hover: rgba(16, 39, 31, 0.06);
  --sidenav-active-bg: var(--green-100);
  --sidenav-active-text: var(--green-800);
  --sidenav-icon-active: var(--green-600);
  --sidenav-line: #dbe5df;
  --brand-mark-front: #10271f;
  --brand-mark-back: #4a7a5a;
  --banner-support: #e3b04b;
  --on-banner: var(--green-900);
  --chart-1: #2f7458;
  --chart-2: #d79b22;
  --chart-ref: #86918b;

  /* typografie */
  --font-ui: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Kantoor: IBM Plex Sans 400, 500, 600 (Google Fonts) */
  --fs-display: 28px; --lh-display: 34px; --fw-display: 600;
  --fs-h1: 22px; --lh-h1: 28px; --fw-h1: 600;
  --fs-h2: 17px; --lh-h2: 24px; --fw-h2: 600;
  --fs-h3: 15px; --lh-h3: 22px; --fw-h3: 600;
  --fs-body: 15px; --lh-body: 22px; --fw-body: 400;
  --fs-body-strong: 15px; --lh-body-strong: 22px; --fw-body-strong: 500;
  --fs-small: 13px; --lh-small: 18px; --fw-small: 400;
  --fs-label: 13px; --lh-label: 16px; --fw-label: 500; --ls-label: 0.01em;
  /* Getallen: IBM Plex Mono 400, 500 */
  --fs-mono: 14px; --lh-mono: 20px; --fw-mono: 400;
  --fs-mono-strong: 14px; --lh-mono-strong: 20px; --fw-mono-strong: 500;
  /* Telefoon: Medewerker-app */
  --fs-mobile-title: 20px; --lh-mobile-title: 26px; --fw-mobile-title: 600;
  --fs-mobile-body: 16px; --lh-mobile-body: 24px; --fw-mobile-body: 400;
  --fs-mobile-strong: 16px; --lh-mobile-strong: 24px; --fw-mobile-strong: 600;

  /* ruimte (basis 4 px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* vorm */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow-float: 0 8px 24px rgba(16, 39, 31, 0.12), 0 1px 2px rgba(16, 39, 31, 0.08);

  /* maten */
  --control-h: 40px;
  --control-h-mobile: 48px;
  --control-h-compact: 32px;
  --row-h: 44px;
  --row-h-compact: 36px;
  --tap-min: 44px;
  --check-task: 28px;
  --chip-h: 24px;
  --icon: 20px;
  --icon-mobile: 24px;
  --tabbar-h: 56px;
  --topbar-h: 56px;
  --sidenav-w: 232px;
  --content-max: 1440px;
  --dialog-max: 560px;

  /* beweging */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 240ms;
  --dur-flash: 1200ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* stapelvolgorde */
  --z-sticky: 10;
  --z-nav: 20;
  --z-banner: 30;
  --z-popover: 40;
  --z-dialog: 50;
  --z-toast: 60;
}

/* thema donker: volgt het systeem, tenzij er een thema gekozen is */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="buiten"]) {
    --bg: #0f1714;
    --surface: #16211c;
    --surface-2: #1d2a24;
    --line: #27362e;
    --line-strong: #3a4d43;
    --line-control: #6b7f74;
    --text: #e7efe9;
    --text-2: #b3c0b8;
    --text-3: #8a9a91;
    --on-primary: #0f1714;
    --primary: #5fa884;
    --primary-hover: #7bc09b;
    --primary-active: #4a9070;
    --focus: #7bc09b;
    --selected-bg: #1a2f26;
    --hover-bg: #1a2f26;
    --selected-border: #5fa884;
    --follows-advice: #7bc09b;
    --success: #7bc09b;
    --success-bg: #17302a;
    --warning: #e2b25a;
    --warning-bg: #3a2c12;
    --danger: #ef8a92;
    --danger-bg: #3c1a1e;
    --on-danger: #0f1714;
    --info: #8db3d4;
    --info-bg: #182a3a;
    --sidenav-bg: #131d18;
    --sidenav-text: #dbe5df;
    --sidenav-text-2: #9fb0a6;
    --sidenav-hover: rgba(255, 255, 255, 0.06);
    --sidenav-active-bg: #1f3a2e;
    --sidenav-active-text: #ffffff;
    --sidenav-icon-active: #8dbb9b;
    --sidenav-line: #27362e;
    --brand-mark-front: #e7efe9;
    --brand-mark-back: #8dbb9b;
    --chart-1: #5fa884;
    --chart-2: #e2b25a;
    --chart-ref: #7b8a82;
    --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1714;
  --surface: #16211c;
  --surface-2: #1d2a24;
  --line: #27362e;
  --line-strong: #3a4d43;
  --line-control: #6b7f74;
  --text: #e7efe9;
  --text-2: #b3c0b8;
  --text-3: #8a9a91;
  --on-primary: #0f1714;
  --primary: #5fa884;
  --primary-hover: #7bc09b;
  --primary-active: #4a9070;
  --focus: #7bc09b;
  --selected-bg: #1a2f26;
  --hover-bg: #1a2f26;
  --selected-border: #5fa884;
  --follows-advice: #7bc09b;
  --success: #7bc09b;
  --success-bg: #17302a;
  --warning: #e2b25a;
  --warning-bg: #3a2c12;
  --danger: #ef8a92;
  --danger-bg: #3c1a1e;
  --on-danger: #0f1714;
  --info: #8db3d4;
  --info-bg: #182a3a;
  --sidenav-bg: #131d18;
  --sidenav-text: #dbe5df;
  --sidenav-text-2: #9fb0a6;
  --sidenav-hover: rgba(255, 255, 255, 0.06);
  --sidenav-active-bg: #1f3a2e;
  --sidenav-active-text: #ffffff;
  --sidenav-icon-active: #8dbb9b;
  --sidenav-line: #27362e;
  --brand-mark-front: #e7efe9;
  --brand-mark-back: #8dbb9b;
  --chart-1: #5fa884;
  --chart-2: #e2b25a;
  --chart-ref: #7b8a82;
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

/* thema Buiten (hoog contrast), voorstel voor de medewerker-app in de zon; besluit nog open (B89) */
:root[data-theme="buiten"] {
  --bg: #ffffff;
  --line: #b9c6bf;
  --line-strong: #7a8a82;
  --line-control: #4a5852;
  --text: #0b1d16;
  --text-2: #26352e;
  --text-3: #34423b;
  --primary: #1c5540;
  --primary-hover: #174b3b;
  --primary-active: #10271f;
  --focus: #10271f;
  --selected-bg: #e3f0e8;
  --hover-bg: #e3f0e8;
  --selected-border: var(--green-800);
  --follows-advice: var(--green-800);
  --success: #1c5540;
  --success-bg: #e3f0e8;
  --warning: #6b4506;
  --danger: #8c1520;
  --info: #234a68;
  --sidenav-bg: #eef3f0;
  --sidenav-text: #0b1d16;
  --sidenav-text-2: #26352e;
  --sidenav-hover: rgba(11, 29, 22, 0.08);
  --sidenav-active-bg: #cfe3d6;
  --sidenav-active-text: var(--green-900);
  --sidenav-icon-active: #1c5540;
  --sidenav-line: #b9c6bf;
  --chart-1: #1c5540;
  --chart-2: #8a5a08;
  --chart-ref: #5b6862;
  --shadow-float: 0 8px 24px rgba(16, 39, 31, 0.2), 0 1px 2px rgba(16, 39, 31, 0.16);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; --dur-flash: 0ms; }
}

/* breekpunten (alleen als waarde, CSS-variabelen werken niet in media queries): bp-mobile 768px, bp-detail 1100px */