/* ==========================================================================
   Het Sportkamp: design tokens
   Bron: Brandbook De Sportanen (kleur als systeem, typografie, grafische taal)
   ========================================================================== */

:root {
  /* --- Kleuren (brandbook HEX, voor online gebruik) --- */
  /* Primair */
  --forest: #246243;      /* Forest Green: dragende kleur */
  --blush: #e05b5e;       /* Blush Red: accenten, stickers */
  --apple: #54ba6c;       /* Apple Green: speelse lijnen, accenten */
  /* Secundair */
  --berry: #b91e47;       /* Berry Red: actie (CTA) */
  --mint: #d7ecdd;        /* Mint Green: zachte vlakken */
  --peach: #f1e6dd;       /* Sandy Peach: zachte vlakken, achtergrond */
  --black: #000000;       /* Deep Black: tekst */
  --white: #ffffff;

  /* Afgeleide tinten (alleen voor diepte en states) */
  --forest-deep: #1b4c34;
  --berry-deep: #8e1637;
  --peach-soft: #f8f2ec;

  /* Tekst */
  --text: rgba(0, 0, 0, 0.84);
  --text-muted: rgba(0, 0, 0, 0.66);
  --text-on-dark: rgba(255, 255, 255, 0.9);

  /* --- Typografie --- */
  /* Koppen: Grandstander. Subkoppen: Patrick Hand (vervanger Marydale). Body: PT Sans */
  --font-heading: "Grandstander", "Trebuchet MS", system-ui, sans-serif;
  --font-hand: "Patrick Hand", "Comic Neue", "Segoe Print", cursive;
  --font-body: "PT Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-body: 1.0625rem;                               /* 17px */
  --fs-small: 0.9375rem;                              /* 15px */
  --fs-xs: 0.8125rem;                                 /* 13px */
  --fs-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem);
  --fs-subkop: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);

  --lh-body: 1.6;
  --lh-heading: 1.08;

  /* --- Ruimte --- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: clamp(4rem, 3rem + 4vw, 6.5rem);

  /* --- Layout --- */
  --container: 76rem;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --header-h: 4.75rem;

  /* --- Vorm (hiërarchie: groot voor foto's, middel voor kaarten, rond voor chips/knoppen) --- */
  --radius-s: 0.625rem;
  --radius-m: 1.25rem;
  --radius-l: 2rem;
  --radius-pill: 999px;

  /* --- Schaduw --- */
  --shadow-card: 0 2px 0 rgba(36, 98, 67, 0.08), 0 14px 30px -18px rgba(36, 98, 67, 0.35);
  --shadow-float: 0 22px 44px -22px rgba(27, 76, 52, 0.55);

  /* --- Beweging --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;
}