:root {
  /* ===== KLEUREN ===== */
  /* Primaire kleur: #92CEE0 (licht teal/blauw) */
  --color-primary:         #92CEE0;
  --color-primary-dark:    #3A9DBF;
  --color-primary-darker:  #1E6B8A; /* voor knoppen met witte tekst */
  --color-primary-hover:   #165878;
  --color-primary-light:   #D9F0F8; /* voor achtergronden */
  --color-primary-muted:   rgba(146, 206, 224, 0.12);

  /* Neutralen */
  --color-bg:              #FFFFFF;
  --color-surface:         #F6FAFB;
  --color-surface-2:       #EBF5F9;
  --color-text:            #1A2B35;
  --color-text-muted:      #5A7585;
  --color-border:          #D0E8F0;
  --color-border-light:    #E8F4F8;

  /* Status */
  --color-success:         #1A8F6A;
  --color-success-bg:      #E6F7F2;
  --color-error:           #C0392B;
  --color-error-bg:        #FDF2F1;

  /* ===== TYPOGRAFIE ===== */
  --font-display: 'Outfit', sans-serif;
  --font-body:    'Inter', sans-serif;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */

  /* ===== SPACING ===== */
  --space-xs:   0.25rem;  /* 4px */
  --space-sm:   0.5rem;   /* 8px */
  --space-md:   1rem;     /* 16px */
  --space-lg:   1.5rem;   /* 24px */
  --space-xl:   2rem;     /* 32px */
  --space-2xl:  3rem;     /* 48px */
  --space-3xl:  4rem;     /* 64px */
  --space-4xl:  6rem;     /* 96px */
  --space-5xl:  8rem;     /* 128px */

  /* ===== LAYOUT ===== */
  --container-max:     89rem;
  --container-padding: 1.5rem;
  --nav-height:        4.5rem;

  /* ===== RADIUS ===== */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* ===== SCHADUWEN ===== */
  --shadow-sm:  0 0.0625rem 0.25rem rgba(30, 107, 138, 0.08), 0 0.0625rem 0.125rem rgba(30, 107, 138, 0.04);
  --shadow-md:  0 0.25rem 1rem rgba(30, 107, 138, 0.10), 0 0.125rem 0.375rem rgba(30, 107, 138, 0.06);
  --shadow-lg:  0 0.75rem 2.5rem rgba(30, 107, 138, 0.12), 0 0.25rem 0.75rem rgba(30, 107, 138, 0.07);
  --shadow-xl:  0 1.5rem 4rem rgba(30, 107, 138, 0.14), 0 0.5rem 1.25rem rgba(30, 107, 138, 0.08);

  /* ===== TRANSITIES ===== */
  --transition-fast:   0.15s ease-out;
  --transition-base:   0.25s ease-out;
  --transition-slow:   0.4s ease-out;
  --transition-spring: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}