:root {
  --kleur-achtergrond:     #F5F0E8;
  --kleur-wit:             #FFFFFF;
  --kleur-donker:          #0F2035;
  --kleur-donker-2:        #1B3A5C;
  --kleur-grijs:           #8FA4B8;
  --kleur-grijs-licht:     #D8E2EC;
  --kleur-accent:          #E8622A;
  --kleur-accent-hover:    #C44A18;
  --kleur-navy:            #1B3A5C;
  --kleur-navy-licht:      #2A5180;
  --kleur-blauw:           #4A7FA5;

  --font-hoofd:            'Barlow Condensed', sans-serif;
  --font-body:             'DM Sans', sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.5rem;
  --fs-3xl:  3.5rem;
  --fs-4xl:  5rem;
  --fs-hero: clamp(3.5rem, 8vw, 7rem);

  --fw-normaal:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --lh-strak:   1.1;
  --lh-normaal: 1.5;
  --lh-ruim:    1.7;

  --ruimte-xs:  0.5rem;
  --ruimte-sm:  1rem;
  --ruimte-md:  2rem;
  --ruimte-lg:  4rem;
  --ruimte-xl:  6rem;
  --ruimte-2xl: 10rem;

  --container-max:  1440px;
  --container-sm:   860px;
  --gutter:         clamp(1.5rem, 5vw, 5rem);

  --ease-standaard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in-uit:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duur-snel:      0.2s;
  --duur-normaal:   0.4s;
  --duur-traag:     0.7s;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-rond: 999px;

  --schaduw-sm: 0 2px 8px rgba(22, 20, 18, 0.08);
  --schaduw-md: 0 8px 32px rgba(22, 20, 18, 0.12);
  --schaduw-lg: 0 24px 64px rgba(22, 20, 18, 0.18);
}