@use "sass:map";
@use "variables" as _variables;
@use "breakpoints" as _bp;

// --------------------------------------------------------------------------
//  ROOT
// --------------------------------------------------------------------------

:root {
   // s-colors • edit in config.scss
   @if _variables.$s-colors {
      @each $color-group, $color-value in _variables.$s-colors {
         @if type-of($color-value) == "map" {
            #{$color-group} {
               @each $color-name, $hex in $color-value {
                  --#{$color-name}: #{$hex};
               }
            }
         } @else {
            --#{$color-group}: #{$color-value};
         }
      }
   }

  
   // s-font-families • edit in config.scss
   @if _variables.$s-font-families {
      @each $font-name, $family in _variables.$s-font-families {
         @if type-of($family) == "list" or "string" {
            --#{$font-name}: #{$family};
         } @else {
            @error "Invalid format for font-family: #{$family}.";
         }
      }
   }

   // s-spacing-values • edit in config.scss
   @if _variables.$s-spacing-values {
      @if type-of(_variables.$s-spacing-values) == "map" {
         @each $key, $value in _variables.$s-spacing-values {
            @if(map.has-key(_variables.$s-breakpoints, #{$key})) {
               @include _bp.media-up(#{$key}) { --spacing: #{$value}; }
            }
         }
      } @else {
         --spacing: #{_variables.$s-spacing-values};
      }
   }

   // s-body-size • edit in config.scss
   @if _variables.$s-body-size {
      @if type-of(_variables.$s-body-size) == "map" {
         @each $key, $value in _variables.$s-body-size {
            @if(map.has-key(_variables.$s-breakpoints, #{$key})) {
               @include _bp.media-up(#{$key}) { --body-size: #{$value}; }
            }
         }
      } @else {
         --body-size: #{_variables.$s-body-size};
      }
   }

   // s-font-weights • edit in config.scss
   @if _variables.$s-font-weights {
      @if type-of(_variables.$s-font-weights) == "map" {
         @each $font-weight, $value in _variables.$s-font-weights {
            --#{$font-weight}: #{$value};
         }
      } @else {
         @error "Invalid format for $s-font-weights. Map required.";
      }
   }

}

// --------------------------------------------------------------------------
// HTML
// --------------------------------------------------------------------------

html {
   // html-size • edit in config.scss
   @if _variables.$s-html-size {
      @if type-of(_variables.$s-html-size) == "map" {
         @each $key, $value in _variables.$s-html-size {
            @if(map.has-key(_variables.$s-breakpoints, #{$key})) {
               @include _bp.media-up(#{$key}) { font-size: #{$value}; }
            }
         }
      } @else {
         font-size: #{_variables.$s-html-size};
      }
   }
}