/* Tiger & Turtle: alle kleuren, lettertypes en maten zitten hier.
   Huisstijl aanpassen = enkel dit bestand. */

@font-face {
  font-family: "Baloo 2";
  src: url("/fonts/baloo2-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Merkkleuren */
  --oranje: #D9782D;          /* logo, decoratie, grote vlakken */
  --oranje-diep: #A9531A;     /* tekst en links in oranje (leesbaar op creme) */
  --oranje-knop: #B85C1C;     /* knoppen met witte tekst */
  --oranje-zacht: #F8E1C7;
  --creme: #FDF4E3;
  --creme-diep: #F6E6C8;
  --groen: #6DB33F;           /* jungle: decoratie */
  --groen-diep: #3E7A22;      /* jungle: tekst */
  --groen-zacht: #E3F1D6;
  --turkoois: #2BB3B1;        /* water: decoratie */
  --turkoois-diep: #0E7C7B;   /* water: knoppen en tekst */
  --turkoois-zacht: #DDF3F1;
  --bruin: #2B1D12;           /* tekst */
  --bruin-zacht: #5E4A3A;

  /* Rollen (gebruikt door site.css en het inschrijfformulier) */
  --kleur-achtergrond: var(--creme);
  --kleur-vlak: #FFFBF3;
  --kleur-tekst: var(--bruin);
  --kleur-tekst-zacht: var(--bruin-zacht);
  --kleur-rand: #EAD9BC;
  --kleur-accent: var(--oranje-knop);
  --kleur-accent-hover: var(--oranje-diep);
  --kleur-accent-tekst: #ffffff;
  --kleur-accent-zacht: var(--oranje-zacht);
  --kleur-link: var(--oranje-diep);
  --kleur-tweede: var(--turkoois-diep);       /* wachtlijst */
  --kleur-tweede-zacht: var(--turkoois-zacht);
  --kleur-fout: #B42318;
  --kleur-fout-zacht: #FDECEA;
  --kleur-ok: var(--groen-diep);
  --kleur-ok-zacht: var(--groen-zacht);

  --font-tekst: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-titel: "Baloo 2", "Nunito", system-ui, sans-serif;
  --tekst-basis: 1.0625rem;
  --tekst-klein: 0.9rem;
  --tekst-groot: 1.3rem;
  --tekst-titel: clamp(2.1rem, 7vw, 3.6rem);
  --tekst-h2: clamp(1.6rem, 4.6vw, 2.3rem);

  --ruimte-1: 0.25rem;
  --ruimte-2: 0.5rem;
  --ruimte-3: 0.75rem;
  --ruimte-4: 1rem;
  --ruimte-5: 1.5rem;
  --ruimte-6: 2.5rem;
  --ruimte-7: 4rem;

  --radius: 20px;
  --radius-groot: 32px;
  --radius-knop: 999px;
  --radius-veld: 12px;
  --schaduw: 0 1px 2px rgba(43, 29, 18, .06), 0 8px 24px rgba(43, 29, 18, .07);
  --breedte-max: 1120px;
  --breedte-tekst: 680px;
  --breedte-form: 680px;
}