: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;

    // 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 $size, $def in $eui-base-tokens-fonts {
        --eui-base-font-#{$size}: #{$def};
    }

    @each $size, $def in $eui-base-tokens-fonts-bold {
        --eui-base-font-bold-#{$size}: #{$def};
    }

    // 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};
    }
}
