/* Paralax-designsysteem — tokens.
   Eén bron voor kleur, ruimte, radius, schaduw en beweging. */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/poppins-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');
}

:root {
  /* Merkkleuren */
  --teal-300: #4db6ac;
  --teal-500: #009688;
  --teal-700: #00796b;
  --teal-800: #00695c;
  --teal-900: #004d40;

  --orange-500: #ff9800;
  --orange-700: #f57c00;
  --orange-800: #ef6c00;
  --orange-900: #e65100;

  --blue-500: #29b6f6;
  --blue-700: #0288d1;
  --blue-800: #0277bd;

  --amber-300: #ffe082;
  --amber-400: #ffcb28;
  --amber-600: #ffb300;

  /* Rollen */
  --color-primary: var(--teal-700);
  --color-primary-strong: var(--teal-800);
  --color-primary-soft: #e0f2f1;
  --color-accent: var(--orange-700);
  --color-accent-soft: #fff3e0;
  --color-info: var(--blue-700);
  --color-info-soft: #e1f5fe;
  --color-highlight: var(--amber-400);
  --color-highlight-soft: #fff8e1;
  --color-success: #2e7d32;
  --color-success-soft: #e8f5e9;
  --color-warning: #f57c00;
  --color-warning-soft: #fff3e0;
  --color-danger: #d32f2f;
  --color-danger-soft: #ffebee;

  /* Tekst */
  --text-strong: #333333;
  --text-body: #3a434d;
  --text-muted: #6b7a8a;
  --text-subtle: #9aa7b2;
  --text-inverse: #ffffff;
  --text-link: var(--teal-700);
  --text-link-hover: var(--teal-900);

  /* Vlakken */
  --surface-page: #f8fafb;
  --surface-card: #ffffff;
  --surface-sunken: #f1f4f7;
  --border-subtle: #dde3e8;
  --border-default: #cdd6de;

  /* Gradients — er zijn er precies twee */
  --gradient-primary: linear-gradient(135deg, var(--teal-700), var(--teal-900));
  --gradient-accent: linear-gradient(135deg, var(--amber-400), var(--orange-700));

  /* Ruimte, 4px-grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Schaduw, koel getint */
  --shadow-xs: 0 1px 2px rgba(38, 56, 74, 0.06);
  --shadow-sm: 0 1px 3px rgba(38, 56, 74, 0.08), 0 1px 2px rgba(38, 56, 74, 0.04);
  --shadow-md: 0 2px 8px rgba(38, 56, 74, 0.08), 0 1px 3px rgba(38, 56, 74, 0.05);
  --shadow-lg: 0 8px 24px rgba(38, 56, 74, 0.10), 0 2px 6px rgba(38, 56, 74, 0.05);
  --shadow-xl: 0 16px 48px rgba(38, 56, 74, 0.13), 0 4px 12px rgba(38, 56, 74, 0.06);

  /* Beweging */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Typografie */
  --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}