:root {

    /*Theme Color*/
    @each $key, $val in $theme-colors {
        #{$css-var-prefix}#{$key}: $val;
    }

    /* Amber */
    @for $i from 1 to $color-shades {
        @if ($i==5) {
            #{$css-var-prefix}amber: darken($amber-base, $i * $color-offset);
            #{$css-var-prefix}amber-#{$i*100}: darken($amber-base, $i * $color-offset);
        }
        @else {
            #{$css-var-prefix}amber-#{$i*100}: darken($amber-base, $i * $color-offset);
        }
    }

    /* aqua */
    @for $i from 1 to $color-shades {
        @if ($i==5) {
            #{$css-var-prefix}aqua: darken($aqua-base, $i * $color-offset);
            #{$css-var-prefix}aqua-#{$i*100}: darken($aqua-base, $i * $color-offset);
        }
        @else {
            #{$css-var-prefix}aqua-#{$i*100}: darken($aqua-base, $i * $color-offset);
        }
    }

    /* blue */
    @for $i from 1 to $color-shades {
        @if ($i==5) {
            #{$css-var-prefix}blue: darken($blue-base, $i * $color-offset);
            #{$css-var-prefix}blue-#{$i*100}: darken($blue-base, $i * $color-offset);
        }
        @else {
            #{$css-var-prefix}blue-#{$i*100}: darken($blue-base, $i * $color-offset);
        }
    }

    /* brown */
    @for $i from 1 to $color-shades {
        @if ($i==5) {
            #{$css-var-prefix}brown: darken($brown-base, $i * $color-offset * .9);
            #{$css-var-prefix}brown-#{$i*100}: darken($brown-base, $i * $color-offset * .9);
        }
        @else {
            #{$css-var-prefix}brown-#{$i*100}: darken($brown-base, $i * $color-offset * .9);
        }
    }

    /* cyan */
    @for $i from 1 to $color-shades {
        @if ($i==5) {
            #{$css-var-prefix}cyan: darken($cyan-base, $i * $color-offset);
            #{$css-var-prefix}cyan-#{$i*100}: darken($cyan-base, $i * $color-offset);
        }
        @else {
            #{$css-var-prefix}cyan-#{$i*100}: darken($cyan-base, $i * $color-offset);
        }
    }

    /* blue-grey */
    @for $i from 1 to $color-shades {
        @if ($i==5) {
            #{$css-var-prefix}blue-grey: darken($blue-grey-base, $i * $color-offset);
            #{$css-var-prefix}blue-grey-#{$i*100}: darken($blue-grey-base, $i * $color-offset);
        }
        @else {
            #{$css-var-prefix}blue-grey-#{$i*100}: darken($blue-grey-base, $i * $color-offset);
        }
    }

    
    /* green */
    @for $i from 1 to $color-shades {
        @if ($i==5) {
            #{$css-var-prefix}green: darken($green-base, $i * $color-offset);
            #{$css-var-prefix}green-#{$i*100}: darken($green-base, $i * $color-offset);
        }
        @else {
            #{$css-var-prefix}green-#{$i*100}: darken($green-base, $i * $color-offset);
        }
    }
    
    /* indigo */
    @for $i from 1 to $color-shades {
        @if ($i==5) {
            #{$css-var-prefix}indigo: darken($indigo-base, $i * $color-offset);
            #{$css-var-prefix}indigo-#{$i*100}: darken($indigo-base, $i * $color-offset);
        }
        @else {
            #{$css-var-prefix}indigo-#{$i*100}: darken($indigo-base, $i * $color-offset);
        }
    }

    /* khaki */
    @for $i from 1 to $color-shades {
        @if ($i==5) {
            #{$css-var-prefix}khaki: darken($khaki-base, $i * $color-offset);
            #{$css-var-prefix}khaki-#{$i*100}: darken($khaki-base, $i * $color-offset);
        }
        @else {
            #{$css-var-prefix}khaki-#{$i*100}: darken($khaki-base, $i * $color-offset);
        }
    }

    /* lime */
    @for $i from 1 to $color-shades {
        @if ($i==5) {
            #{$css-var-prefix}lime: darken($lime-base, $i * $color-offset);
            #{$css-var-prefix}lime-#{$i*100}: darken($lime-base, $i * $color-offset);
        }
        @else {
            #{$css-var-prefix}lime-#{$i*100}: darken($lime-base, $i * $color-offset);
        }
    }

    
    /* orange */
    @for $i from 1 to $color-shades {
        @if ($i==5) {
            #{$css-var-prefix}orange: darken($orange-base, $i * $color-offset);
            #{$css-var-prefix}orange-#{$i*100}: darken($orange-base, $i * $color-offset);
        }
        @else {
            #{$css-var-prefix}orange-#{$i*100}: darken($orange-base, $i * $color-offset);
        }
    }
    
    /* pink */
    @for $i from 1 to $color-shades {
        @if ($i==5) {
            #{$css-var-prefix}pink: darken($pink-base, $i * $color-offset);
            #{$css-var-prefix}pink-#{$i*100}: darken($pink-base, $i * $color-offset);
        }
        @else {
            #{$css-var-prefix}pink-#{$i*100}: darken($pink-base, $i * $color-offset);
        }
    }

    
    /* purple */
    @for $i from 1 to $color-shades {
        @if ($i==5) {
            #{$css-var-prefix}purple: darken($purple-base, $i * $color-offset);
            #{$css-var-prefix}purple-#{$i*100}: darken($purple-base, $i * $color-offset);
        }
        @else {
            #{$css-var-prefix}purple-#{$i*100}: darken($purple-base, $i * $color-offset);
        }
    }

    
    /* red */
    @for $i from 1 to $color-shades {
        @if ($i==5) {
            #{$css-var-prefix}red: darken($red-base, $i * $color-offset);
            #{$css-var-prefix}red-#{$i*100}: darken($red-base, $i * $color-offset);
        }
        @else {
            #{$css-var-prefix}red-#{$i*100}: darken($red-base, $i * $color-offset);
        }
    }
    
    /* teal */
    @for $i from 1 to $color-shades {
        @if ($i==5) {
            #{$css-var-prefix}teal: darken($teal-base, $i * $color-offset);
            #{$css-var-prefix}teal-#{$i*100}: darken($teal-base, $i * $color-offset);
        }
        @else {
            #{$css-var-prefix}teal-#{$i*100}: darken($teal-base, $i * $color-offset);
        }
    }
    
    /* yellow */
    @for $i from 1 to $color-shades {
        @if ($i==5) {
            #{$css-var-prefix}yellow: darken($yellow-base, $i * $color-offset);
            #{$css-var-prefix}yellow-#{$i*100}: darken($yellow-base, $i * $color-offset);
        }
        @else {
            #{$css-var-prefix}yellow-#{$i*100}: darken($yellow-base, $i * $color-offset);
        }
    }

        
    /* grey */
    @for $i from 1 to $color-shades {
        @if ($i==5) {
            #{$css-var-prefix}grey: darken($grey-base, $i * $color-offset);
            #{$css-var-prefix}grey-#{$i*100}: darken($grey-base, $i * $color-offset);
        }
        @else {
            #{$css-var-prefix}grey-#{$i*100}: darken($grey-base, $i * $color-offset);
        }
    }

    #{$css-var-prefix}dark: $dark;
    #{$css-var-prefix}black: $black;
    #{$css-var-prefix}white: $white;
    #{$css-var-prefix}off-white: $off-white;
    #{$css-var-prefix}transparent: transparent;
}