@import 'colors';
@import 'typography';

:root {
    /**
    @font family declaration
    */
    @each $ff, $shades in $font-family {
        @each $shade, $value in $shades {
            --zo-#{$ff}-#{$shade}: #{$value};
        }
    }

    /**
    @color declaration
    */
    @each $color, $shades in $colors {
        @each $shade, $value in $shades {
            --zo-#{$color}-#{$shade}: #{$value};
        }
    }


    /**
    @font weight declaration
    */
    
    @each $fw, $shades in $font-scale {
        @each $shade, $value in $shades {
            --zo-#{$fw}-#{$shade}: #{$value};
        }
    }

    /**
    @font size declaration
    */
    
    @each $fz, $shades in $font-size {
        @each $shade, $value in $shades {
            --zo-#{$fz}-#{$shade}: #{$value};
        }
    }
    @each $fz-mob, $shades in $font-size-mob {
        @each $shade, $value in $shades {
            --zo-#{$fz-mob}-#{$shade}: #{$value};
        }
    }
    @each $fz-tab, $shades in $font-size-tab {
        @each $shade, $value in $shades {
            --zo-#{$fz-tab}-#{$shade}: #{$value};
        }
    }

    /**
    @line height declaration
    */

    @each $lh, $shades in $line-height {
        @each $shade, $value in $shades {
            --zo-#{$lh}-#{$shade}: #{$value};
        }
    }
}