:root {

    @each $color, $value in $theme-colors {
        --#{$color}: #{$value};
    }

    @each $color, $value in $socialColors {
        --#{$color}: #{$value};
    }

    @each $color, $value in $button-colors {
        --#{$color}-hover: #{darken($value, 10%)};
        --#{$color}-border: #{darken($value, 0%)};
        --#{$color}-hover-border: #{darken($value, 10%)};
        --#{$color}-btn-color: #{lighten($value, 100%)};
        --#{$color}-btn-hover-color: #{lighten($value, 100%)};
        --#{$color}-btn-shadow: none;
        --#{$color}-btn-hover-shadow: none;
    }

    // Use `inspect` for lists so that quoted items keep the quotes.
    // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
    --font-family-base: #{inspect($font-family-base)};
    --font-family-rtl: #{inspect($font-family-rtl)};
    --body-bg: #{$gray};

    @each $screen, $size in $app-screens {
        --#{$screen}: #{$size};
    }

    --plyr-color-main: var(--primary);
}