:root {

    /* Brand — uit het MijnAansluiting logo */
    --maf-magenta: #be2c82;
    --maf-cyan: #1bb5d5;
    --maf-green: #119971;
    --maf-blue: #1a4d99;

    /* Neutrals */
    --maf-navy: #2d3f58;
    --maf-white: #ffffff;
    --maf-black: #1a1a1a;
    --maf-grey-50: #fafafa;
    --maf-grey-100: #f5f5f5;
    --maf-grey-200: #eeeeee;
    --maf-grey-300: #e0e0e0;
    --maf-grey-400: #bdbdbd;
    --maf-grey-500: #9e9e9e;
    --maf-grey-600: #757575;
    --maf-grey-700: #616161;

    /* Semantic */
    --maf-color-primary: var(--maf-blue);
    --maf-color-accent: var(--maf-magenta);
    --maf-color-info: var(--maf-cyan);
    --maf-color-success: var(--maf-green);
    --maf-color-text: var(--maf-navy);
    --maf-color-text-subtle: var(--maf-grey-600);
    --maf-color-page-bg: #e6e6e6;
    --maf-color-border: var(--maf-grey-300);
    --maf-color-surface: var(--maf-white);
    --maf-color-background: var(--maf-grey-50);
    --maf-color-disabled: var(--maf-grey-400);

    /* Typografie */
    --maf-font-display: "Aller", sans-serif;
    --maf-font-body: "Roboto", sans-serif;

    --maf-font-size-xs: 0.75rem;
    --maf-font-size-sm: 0.875rem;
    --maf-font-size-md: 1rem;
    --maf-font-size-lg: 1.25rem;
    --maf-font-size-xl: 1.5rem;
    --maf-font-size-2xl: 2rem;
    --maf-font-size-3xl: 2.5rem;

    --maf-font-weight-regular: 400;
    --maf-font-weight-medium: 500;
    --maf-font-weight-bold: 700;

    --maf-line-height-tight: 1.2;
    --maf-line-height-normal: 1.5;
    --maf-line-height-loose: 1.75;

    /* Spacing (4px grid) */
    --maf-space-1: 0.25rem;
    --maf-space-2: 0.5rem;
    --maf-space-3: 0.75rem;
    --maf-space-4: 1rem;
    --maf-space-5: 1.25rem;
    --maf-space-6: 1.5rem;
    --maf-space-8: 2rem;
    --maf-space-10: 2.5rem;
    --maf-space-12: 3rem;
    --maf-space-16: 4rem;

    /* Border radius (Material) */
    --maf-radius-sm: 4px;
    --maf-radius-md: 8px;
    --maf-radius-lg: 12px;
    --maf-radius-xl: 16px;
    --maf-radius-full: 9999px;
}