/* =========================================================================
   Swimcool — design tokens
   Importeer dit bestand als eerste. Codeer nooit kleuren of maten hard.
   ========================================================================= */

:root {
  /* --- Kernkleuren --- */
  --sc-navy: #1A3B5C;
  --sc-oranje: #F47B20;
  --sc-turquoise: #4DBBD6;
  --sc-lichtblauw: #E8F4FD;
  --sc-zachtblauw: #B8DFF0;
  --sc-wit: #FFFFFF;

  /* --- Ondersteunend --- */
  --sc-diepblauw: #0D2E4A;
  --sc-geel: #FFF3CD;
  --sc-groen: #4CAF50;      /* uitsluitend sportkampen */
  --sc-zand: #F5E6D0;
  --sc-rood: #E05252;       /* enkel voor foutstatus */

  /* --- Afgeleide tinten --- */
  --sc-navy-zacht: #3A5570;      /* lopende tekst */
  --sc-navy-licht: #6B8299;      /* bijschriften, secundaire tekst */
  --sc-oranje-donker: #DB6A15;   /* hover op oranje */
  --sc-oranje-zacht: #FDEBDC;    /* zachte oranje achtergrond */
  --sc-turquoise-donker: #35A3BE;
  --sc-lijn: #D6E9F7;            /* scheidingslijnen */

  /* --- Typografie --- */
  --sc-font-display: 'Fredoka', 'Quicksand', system-ui, sans-serif;
  --sc-font-accent: 'Caveat', cursive;
  --sc-font-body: 'Nunito', 'Quicksand', system-ui, -apple-system, sans-serif;

  --sc-text-hero: clamp(2rem, 5vw, 3.5rem);
  --sc-text-h2: clamp(1.6rem, 3.2vw, 2.125rem);
  --sc-text-h3: 1.375rem;
  --sc-text-eyebrow: 1.25rem;
  --sc-text-body: 1.0625rem;
  --sc-text-klein: 0.875rem;

  --sc-lh-titel: 1.2;
  --sc-lh-body: 1.65;

  /* --- Vorm --- */
  --sc-radius-kaart: 16px;
  --sc-radius-knop: 999px;
  --sc-radius-klein: 12px;
  --sc-radius-label: 999px;

  --sc-schaduw: 0 2px 12px rgba(26, 59, 92, .08);
  --sc-schaduw-hoog: 0 8px 24px rgba(26, 59, 92, .12);
  --sc-schaduw-knop: 0 4px 12px rgba(244, 123, 32, .28);

  /* --- Ruimte --- */
  --sc-ruimte-xs: 4px;
  --sc-ruimte-s: 8px;
  --sc-ruimte-m: 16px;
  --sc-ruimte-l: 24px;
  --sc-ruimte-xl: 40px;
  --sc-ruimte-xxl: 64px;

  --sc-sectie-padding: clamp(20px, 4vw, 48px);
  --sc-max-breedte: 1120px;
  --sc-max-breedte-mail: 640px;

  /* --- Overgangen --- */
  --sc-overgang: 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root { --sc-overgang: 1ms; }
}