/*
 * WatWillenWijDoen — design tokens (sectie 48).
 * Eigen merk, geen tech blauw/paars: "Vonk" (oranjerood) als primair,
 * "Diepzee" (petrolgroen) als accent, warme neutralen in plaats van klinisch wit/zwart.
 */

:root {
  /* ---- Kleur: merk ---- */
  --color-primary-50:  #FFF1EC;
  --color-primary-100: #FFDDD1;
  --color-primary-300: #FF9376;
  --color-primary-500: #FF5A36;   /* Vonk — hoofdkleur */
  --color-primary-600: #E8451F;
  --color-primary-700: #C23718;

  --color-accent-50:  #E9F5F3;
  --color-accent-300: #6FB3A9;
  --color-accent-500: #0E6E64;    /* Diepzee — accent */
  --color-accent-600: #0A5951;
  --color-accent-700: #07423C;

  /* ---- Kleur: neutralen (warm, geen puur zwart/wit) ---- */
  --color-ink:        #1B1815;
  --color-ink-soft:   #4A433C;
  --color-muted:      #8A8078;
  --color-paper:      #FBF7F2;
  --color-surface:    #FFFFFF;
  --color-border:     #E9E1D8;
  --color-border-strong: #D8CCBE;

  /* ---- Kleur: semantisch (los van merk) ---- */
  --color-success: #1F9D77;
  --color-success-bg: #E7F5EF;
  --color-warning: #F5A524;
  --color-warning-bg: #FDF3DF;
  --color-danger:  #E5484D;
  --color-danger-bg: #FBE9E9;

  /* ---- Typografie ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.875rem;  /* 14px */
  --text-md:  1rem;      /* 16px */
  --text-lg:  1.125rem;  /* 18px */
  --text-xl:  1.375rem;  /* 22px */
  --text-2xl: 1.875rem;  /* 30px */
  --text-3xl: 2.5rem;    /* 40px */
  --text-display: clamp(2.25rem, 5vw, 4rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* ---- Spacing (consistent ritme, geen losse waarden) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Shadows (subtiel, warm getint in plaats van puur grijs) ---- */
  --shadow-sm: 0 1px 2px rgba(27, 24, 21, 0.06), 0 1px 1px rgba(27, 24, 21, 0.04);
  --shadow-md: 0 10px 30px rgba(27, 24, 21, 0.10);
  --shadow-lg: 0 24px 56px rgba(27, 24, 21, 0.16);

  /* ---- Transitions ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-reveal: 800ms;

  /* ---- Z index ---- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ---- Breakpoints (documentatie; media queries staan los, CSS kent geen var() in @media) ---- */
  --bp-xs: 320px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  --container-max: 1240px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}