:root {
    /* Kies een kleur die overal voldoende contrast heeft */


    /* Base aliases (WP preset -> korte naam) */
    --ge-black: var(--wp--preset--color--black);
    --ge-danger: #D23545;
    --ge-dark: var(--wp--preset--color--dark);
    --ge-primary: var(--wp--preset--color--primary);
    --ge-primary-light: var(--wp--preset--color--primary-light);
    --ge-secondary: var(--wp--preset--color--secondary);
    --ge-secondary-light: var(--wp--preset--color--secondary-light);
    --ge-light: var(--wp--preset--color--light);
    --ge-white: var(--wp--preset--color--white);

    /* Variants for BLACK */
    --ge-black-t20: color-mix(in srgb, white 20%, var(--ge-black));
    --ge-black-t40: color-mix(in srgb, white 40%, var(--ge-black));
    --ge-black-t60: color-mix(in srgb, white 60%, var(--ge-black));
    --ge-black-t80: color-mix(in srgb, white 80%, var(--ge-black));
    --ge-black-s20: color-mix(in srgb, black 20%, var(--ge-black));
    --ge-black-s40: color-mix(in srgb, black 40%, var(--ge-black));
    --ge-black-s60: color-mix(in srgb, black 60%, var(--ge-black));
    --ge-black-s80: color-mix(in srgb, black 80%, var(--ge-black));

    /* Variants for DARK */
    --ge-dark-t20: color-mix(in srgb, white 20%, var(--ge-dark));
    --ge-dark-t40: color-mix(in srgb, white 40%, var(--ge-dark));
    --ge-dark-t60: color-mix(in srgb, white 60%, var(--ge-dark));
    --ge-dark-t80: color-mix(in srgb, white 80%, var(--ge-dark));
    --ge-dark-t90: color-mix(in srgb, white 90%, var(--ge-dark));
    --ge-dark-t95: color-mix(in srgb, white 95%, var(--ge-dark));
    --ge-dark-s20: color-mix(in srgb, black 20%, var(--ge-dark));
    --ge-dark-s40: color-mix(in srgb, black 40%, var(--ge-dark));
    --ge-dark-s60: color-mix(in srgb, black 60%, var(--ge-dark));
    --ge-dark-s80: color-mix(in srgb, black 80%, var(--ge-dark));
    --ge-dark-s90: color-mix(in srgb, black 90%, var(--ge-dark));
    --ge-dark-s95: color-mix(in srgb, black 95%, var(--ge-dark));

    /* Variants for PRIMARY */
    --ge-primary-t20: color-mix(in srgb, white 20%, var(--ge-primary));
    --ge-primary-t40: color-mix(in srgb, white 40%, var(--ge-primary));
    --ge-primary-t60: color-mix(in srgb, white 60%, var(--ge-primary));
    --ge-primary-t80: color-mix(in srgb, white 80%, var(--ge-primary));
    --ge-primary-t90: color-mix(in srgb, white 90%, var(--ge-primary));
    --ge-primary-t95: color-mix(in srgb, white 95%, var(--ge-primary));
    --ge-primary-s20: color-mix(in srgb, black 20%, var(--ge-primary));
    --ge-primary-s40: color-mix(in srgb, black 40%, var(--ge-primary));
    --ge-primary-s60: color-mix(in srgb, black 60%, var(--ge-primary));
    --ge-primary-s80: color-mix(in srgb, black 80%, var(--ge-primary));
    --ge-primary-s90: color-mix(in srgb, black 90%, var(--ge-primary));
    --ge-primary-s95: color-mix(in srgb, black 95%, var(--ge-primary));

    /* Variants for PRIMARY-LIGHT */
    --ge-primary-light-t20: color-mix(in srgb, white 20%, var(--ge-primary-light));
    --ge-primary-light-t40: color-mix(in srgb, white 40%, var(--ge-primary-light));
    --ge-primary-light-t60: color-mix(in srgb, white 60%, var(--ge-primary-light));
    --ge-primary-light-t80: color-mix(in srgb, white 80%, var(--ge-primary-light));
    --ge-primary-light-s20: color-mix(in srgb, black 20%, var(--ge-primary-light));
    --ge-primary-light-s40: color-mix(in srgb, black 40%, var(--ge-primary-light));
    --ge-primary-light-s60: color-mix(in srgb, black 60%, var(--ge-primary-light));
    --ge-primary-light-s80: color-mix(in srgb, black 80%, var(--ge-primary-light));

    /* Variants for SECONDARY */
    --ge-secondary-t20: color-mix(in srgb, white 20%, var(--ge-secondary));
    --ge-secondary-t40: color-mix(in srgb, white 40%, var(--ge-secondary));
    --ge-secondary-t60: color-mix(in srgb, white 60%, var(--ge-secondary));
    --ge-secondary-t80: color-mix(in srgb, white 80%, var(--ge-secondary));
    --ge-secondary-t90: color-mix(in srgb, white 90%, var(--ge-secondary));
    --ge-secondary-t95: color-mix(in srgb, white 95%, var(--ge-secondary));
    --ge-secondary-s20: color-mix(in srgb, black 20%, var(--ge-secondary));
    --ge-secondary-s40: color-mix(in srgb, black 40%, var(--ge-secondary));
    --ge-secondary-s60: color-mix(in srgb, black 60%, var(--ge-secondary));
    --ge-secondary-s80: color-mix(in srgb, black 80%, var(--ge-secondary));
    --ge-secondary-s90: color-mix(in srgb, black 90%, var(--ge-secondary));
    --ge-secondary-s95: color-mix(in srgb, black 95%, var(--ge-secondary));

    /* Variants for SECONDARY-LIGHT */
    --ge-secondary-light-t20: color-mix(in srgb, white 20%, var(--ge-secondary-light));
    --ge-secondary-light-t40: color-mix(in srgb, white 40%, var(--ge-secondary-light));
    --ge-secondary-light-t60: color-mix(in srgb, white 60%, var(--ge-secondary-light));
    --ge-secondary-light-t80: color-mix(in srgb, white 80%, var(--ge-secondary-light));
    --ge-secondary-light-s20: color-mix(in srgb, black 20%, var(--ge-secondary-light));
    --ge-secondary-light-s40: color-mix(in srgb, black 40%, var(--ge-secondary-light));
    --ge-secondary-light-s60: color-mix(in srgb, black 60%, var(--ge-secondary-light));
    --ge-secondary-light-s80: color-mix(in srgb, black 80%, var(--ge-secondary-light));

    /* Variants for LIGHT */
    --ge-light-t20: color-mix(in srgb, white 20%, var(--ge-light));
    --ge-light-t40: color-mix(in srgb, white 40%, var(--ge-light));
    --ge-light-t60: color-mix(in srgb, white 60%, var(--ge-light));
    --ge-light-t80: color-mix(in srgb, white 80%, var(--ge-light));
    --ge-light-s20: color-mix(in srgb, black 20%, var(--ge-light));
    --ge-light-s40: color-mix(in srgb, black 40%, var(--ge-light));
    --ge-light-s60: color-mix(in srgb, black 60%, var(--ge-light));
    --ge-light-s80: color-mix(in srgb, black 80%, var(--ge-light));

    /* Variants for WHITE */
    --ge-white-t20: color-mix(in srgb, white 20%, var(--ge-white));
    --ge-white-t40: color-mix(in srgb, white 40%, var(--ge-white));
    --ge-white-t60: color-mix(in srgb, white 60%, var(--ge-white));
    --ge-white-t80: color-mix(in srgb, white 80%, var(--ge-white));
    --ge-white-s20: color-mix(in srgb, black 20%, var(--ge-white));
    --ge-white-s40: color-mix(in srgb, black 40%, var(--ge-white));
    --ge-white-s60: color-mix(in srgb, black 60%, var(--ge-white));
    --ge-white-s80: color-mix(in srgb, black 80%, var(--ge-white));


    --focus-ring-color: var(--ge-danger);
    --focus-ring-width: 3px;
    --focus-ring-offset: 3px;
    --focus-ring-radius: 6px;
}