:root {
    // // FONTS
    --eui-base-font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    // --eui-base-font-family: 'Source Sans Pro', sans-serif;  <link href="https://fonts.cdnfonts.com/css/source-sans-pro" rel="stylesheet">
    // --eui-base-font-family: 'Roboto', sans-serif;  <link href="https://fonts.cdnfonts.com/css/roboto" rel="stylesheet">
    --eui-base-font-family-icons: 'eui-icons', sans-serif;
    --eui-base-font-family-monospace: 'Consolas', 'Liberation Mono', 'Courier New', monospace;

    // COLORS
    @each $color, $shades in $eui-base-tokens-colors {
        @each $shade, $value in $shades {
            --eui-base-color-#{$color + '-' + $shade}: #{$value};
            --eui-base-color-#{$color + '-' + $shade}-rgb: #{toRGB($value)};
            --eui-base-color-#{$color + '-' + $shade}-contrast: #{getContrast($value)};
            --eui-base-color-#{$color + '-' + $shade}-contrast-rgb: #{toRGB(getContrast($value))};
        }
    }

    // DEFAULTS 100s
    @each $color, $value in $eui-base-tokens-colors-100s {
        --eui-base-color-#{'' + $color}: #{$value};
    }

    // OTHER COLORS
    --eui-base-color-text: var(--eui-base-color-grey-100);
    --eui-base-color-link: var(--eui-base-color-primary-100);
    --eui-base-color-black: black;
    --eui-base-color-white: white;
    --eui-base-color: var(--eui-base-color-grey-100);

    // FONT-SIZES
    --eui-base-font-size: 16px;
    @each $font-size, $value in $eui-base-tokens-font-sizes {
        --eui-base-font-size-#{$font-size}: #{$value};
    }

    // ICON-SIZES
    --eui-base-icon-size: 1.5rem;
    @each $icon-size, $value in $eui-base-tokens-icon-sizes {
        --eui-base-icon-size-#{$icon-size}: #{$value};
    }

    @each $family, $sizes in $eui-base-tokens-fonts {
        $family-type: $family + '-';
        @if($family == ui) {
            $family-type: '';
        }

        @each $size, $definition in $sizes {
            --eui-base-font-#{$family-type}#{$size}: #{$definition};
        }
    }

    // SPACINGS
    @each $spacing, $value in $eui-base-tokens-spacings {
        --eui-base-spacing-#{$spacing}: #{$value};
    }

    // SHADOWS
    @each $shadow, $value in $eui-base-tokens-shadows {
        --eui-base-shadow-#{$shadow}: #{$value};
    }

    // Z-INDEXES
    @each $idx, $value in $eui-base-tokens-z-indexes {
        --eui-base-z-index-#{$idx}: #{$value};
    }
}
