:root {
    --color-primary: #22397b;
    --color-secondary: #cd1719;
    --color-tertiary: #6d9bd2;
    --color-black: #111111;
    --color-white: #fff;
	--color-gray-100: #f8f8f8;
	--color-gray-200: #dedede;
	--color-gray-500: #aaaaaa;
	--color-gray-700: #666666;
    --color-link-hover: var(--color-primary);

    --container-width: 1800px;
    --spacing-x: max(24px, min(calc(0.1063829787*(100vw - 37.5em) + 24px), 144px));
    --spacing-y: max(97.7777777778px, min(calc(0.1083530339*(100vw - 37.5em) + 97.7777777778px), 220px));
    --spacing-y-xxs: calc(var(--spacing-y)* 0.25);
    --spacing-x-xxs: calc(var(--spacing-x)* 0.25);

    /* Font Sizes - Modern Fluid Typography met clamp() */
    /* Formule: clamp(MIN, PREFERRED, MAX) */
    /* Scale: 1.25 (Major Third) voor mobile → 1.333 (Perfect Fourth) voor desktop */

    --font-size-base: clamp(1.2rem, 0.85rem + 0.125vw, 1.2rem);   /* 14px → 16px */
    --font-size: var(--font-size-base);                                /* Alias voor body text */

    /* Kleinere sizes */
    --font-size-sm: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);         /* 14px → 16px */
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);        /* 12px → 14px */
    --font-size-small: var(--font-size-xs);                            /* Alias voor backward compatibility */

    /* Headings - Duidelijke hiërarchie */
    --font-size-h5: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);           /* 18px → 20px */
    --font-size-h4: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);          /* 20px → 24px */
    --font-size-h3: clamp(1.5rem, 1.3rem + 1vw, 2rem);                /* 24px → 32px */
    --font-size-h2: clamp(2rem, 1.6rem + 2vw, 2.6rem);               /* 32px → 44px */
    --font-size-h1: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);              /* 40px → 56px */
    --font-size-display: clamp(3rem, 2.5rem + 3vw, 4.5rem);           /* 48px → 72px - Voor hero titels */

    /* Utility sizes - backwards compatible met oude naming */
    --font-size-md: var(--font-size-h4);                               /* Medium = H4 size */
    --font-size-l: var(--font-size-h3);                                /* Large = H3 size */
    --font-size-xl: var(--font-size-h2);                               /* XL = H2 size */
    --font-size-xxl: var(--font-size-h1);                              /* XXL = H1 size */

    /* Line heights voor optimale leesbaarheid */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    --border-width: max(2px, min(calc(0.0008865248*(100vw - 37.5em) + 2px), 3px));

    --burger-bar-width: max(24px, min(calc(0.025*(100vw - 46.5em) + 24px), 30px));
    --burger-bar-height: 2px;
    --burger-bar-spacing: calc(var(--burger-bar-width) / 3);
    --burger-bar-color: var(--color-white);
    --burger-bar-color-open: var(--color-white);
    --burger-width: var(--burger-bar-width);
    --burger-delay: 300ms;
    --burger-background: transparent;
    --color-background-neutral: var(--color-white);

    --burger-height: calc(var(--burger-width) -(var(--burger-bar-height)* 3));
   
    --easing: cubic-bezier(0.19, 1, 0.22, 1);
    --animate-fast: 0.4s var(--easing);
    --animate: 0.8s var(--easing);
    --animate-slow: 1.2s var(--easing);
    --animate-very-slow: 3s var(--easing);

    --ratio: 25.18%;
  }