:root {
    /* COLOR — functional roles */
    --clr-surface: var(--clr-neutral-white);
    --clr-surface-overlay: var(--clr-neutral-white-90);
    --clr-text-primary: var(--clr-primary-blue);
    --clr-text-secondary: #706e6b;
    --clr-border-subtle: var(--clr-neutral-black-10);
    --clr-backdrop: var(--clr-neutral-black-10);
    --clr-input-border: var(--clr-secondary-light-gray);
    --clr-input-border-focus: var(--clr-primary-blue);
    --clr-input-border-error: var(--clr-primary-red);
    --shadow-input-focus: 0 0 0 var(--space-1) var(--clr-input-border-focus);
    --shadow-input-error: 0 0 0 var(--space-1) var(--clr-input-border-error);

    /* COLOR — palette (exact values) */
    /* primary */
    --clr-primary-blue: #003366;
    --clr-primary-red: #ed0500;
    --clr-primary-yellow: #feb900;
    --clr-primary-green: #007a33;

    /* secondary */
    --clr-secondary-light-blue: #b4c5cc;
    --clr-secondary-light-gray: #e6e6e5;
    --clr-secondary-blue: #111f39;
    --clr-secondary-black: #0c0800;

    /* tertiary */
    --clr-tertiary-yellow: #fae7aa;
    --clr-tertiary-light-yellow: #fef8e6;
    --clr-tertiary-peach: #f5dad8;
    --clr-tertiary-light-peach: #fcf3f2;
    --clr-tertiary-brown: #cfb9a0;
    --clr-tertiary-light-brown: #f0e9e2;
    --clr-tertiary-green: #768f59;
    --clr-tertiary-light-green: #d6d9c7;
    --clr-tertiary-blue: #aec9e6;
    --clr-tertiary-light-blue: #e7edf9;
    --clr-tertiary-purple: #907bb7;
    --clr-tertiary-light-purple: #dad5eb;

    /* extras */
    --clr-purple-300: #ab98c9;

    /* neutrals */
    --clr-neutral-white: #ffffff;
    --clr-neutral-white-90: #ffffffe6; /* 90% white */
    --clr-neutral-black-10: #0000001a; /* 10% black */
    --clr-neutral-white-10: #ffffff1a; /* 10% white */
    --clr-neutral-white-20: #ffffff33; /* 20% white */

    /* button states */
    --clr-primary-yellow-active: #fec733;
    --clr-primary-yellow-active-border: #fec01a;
    --clr-primary-blue-dark: #002a55;
    --clr-primary-blue-darker: #002142;
    --clr-primary-blue-darkest: #00152b;
    --clr-tertiary-blue-soft: #dbe4f5;
    --clr-primary-red-dark: #c20400;
    --clr-primary-red-darker: #a30400;
    --clr-primary-red-darkest: #8a0300;
    --clr-tertiary-red-soft: #fff0f0;
    --clr-tertiary-red-soft-strong: #ffe0e0;
    --clr-primary-green-dark: #3a8a35;
    --clr-primary-green-darker: #2f6f2b;
    --clr-primary-green-darkest: #255421;
    --clr-tertiary-green-soft: #eff9f2;
    --clr-tertiary-green-soft-strong: #e0f2e6;

    /* TYPOGRAPHY */
    --fw-regular: 400;
    --fw-bold: 700;
    --font-family-base: 'Heijmans', sans-serif;
    --fs-7: 0.438rem; /* 12px */
    --fs-12: 0.75rem; /* 12px */
    --fs-14: 0.875rem; /* 14px */
    --fs-16: 1rem; /* 16px */
    --fs-18: 1.125rem; /* 18px */
    --fs-24: 1.5rem; /* 24px */
    --fs-36: 2.25rem; /* 36px */
    --lh-1: 1;

    /* SPACING */
    --space-0: 0;
    --space-1: 0.0625rem; /* 1px */
    --space-2: 0.125rem; /* 2px */
    --space-3: 0.1875rem; /* 3px */
    --space-4: 0.25rem; /* 4px */
    --space-5: 0.3125rem; /* 5px */
    --space-6: 0.375rem; /* 6px */
    --space-8: 0.5rem; /* 8px */
    --space-10: 0.625rem; /* 10px */
    --space-12: 0.75rem; /* 12px */
    --space-15: 0.9375rem; /* 15px */
    --space-16: 1rem; /* 16px */
    --space-20: 1.25rem; /* 20px */
    --space-24: 1.5rem; /* 24px */
    --space-28: 1.75rem; /* 28px */
    --space-32: 2rem; /* 32px */
    --space-44: 2.75rem; /* 44px */
    --space-48: 3rem; /* 44px */
    --space-64: 4rem; /* 64px */

    /* SIZES */
    --size-logo: 3rem; /* 48px */
    --size-icon-xl: 2.75rem; /* 44px */
    --size-icon-lg: 1.5rem; /* 24px */
    --size-icon-md: 1.25rem; /* 20px */
    --size-icon-header: 1.25rem; /* 20px */
    --size-icon-close-w: 0.9375rem; /* 15px */
    --size-icon-close-h: 1.25rem; /* 20px */
    --size-container-max-width: 80.5rem; /* 1288px
    --size-128: 8rem; /* 128px */

    /* RADIUS, SHADOW, Z */
    --radius-4: 0.25rem; /* 4px */
    --radius-2: 0.125rem; /* 2px */
    --radius-6: 0.375rem; /* 6px */
    --radius-12: 0.75rem; /* 12px */
    --radius-16: 1rem; /* 16px */
    --radius-30: 1.875rem; /* 30px */
    --radius-60: 3.75rem; /* 60px */
    --radius-pill: 9999px;

    --blur-10: 0.625rem; /* 20px */
    --blur-20: 1.25rem; /* 20px */

    --opacity-muted: 0.33;
    --lh-1-2: 1.2;

    --shadow-overlay: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.25); /* 0 12px 24px */

    /* Z-Index Tokens  */
    --z-base: 1;
    --z-component-overlay: 99;
    --z-header: 999;
    --z-overlay-mobile: 9999;
}