@use 'baseColors' as *;
@use 'semanticColors' as *;
@use 'spacing' as *;
@use 'surfaces' as *;
@use 'spacing' as *;
@use 'typography' as *;

// BaseColors
:root {
  @each $name, $color in $colors {
    --#{"" + $name}: #{$color};
  }
}

// SemanticColors
// Write semantic CSS color variables to root
// **NOTE**: Most variables do not need to be exposed as a CSS variable
:root {
  // See def in semanticColors.scss
  --black-rgb-color: #{extract-rgb('metal-100')};
}

// Spacing
@each $name, $text-def in $spacing {
  $suffix: str-replace('' + $name, 'space-', '');

  .#{'padding-' + $suffix} {
    @include padding($suffix)
  }
}

// Surfaces
@each $name, $def in $shadow {
  $suffix: str-replace('' + $name, 'shadow-', '');

  .#{'depth-' + $suffix} {
    @include depth($suffix)
  }
}

body {
  .focused {
    @include focused;
  } 
}

// Typography
// See typography.scss
:root {
  --font-stack-sans: #{$internal-font-stack-sans};
  --font-stack-mono: #{$internal-font-stack-mono};
}

@each $name, $text-def in $text {
  .#{$name} {
    @include text(str-replace($name, 'text-', ''))
  }
}

.text-mono-m {
  @include text-mono-m;
}

.text-mono-s {
  @include text-mono-s;
}

.line-height-normal {
  @include line-height-normal;
}

.line-height-condensed {
  @include line-height-condensed;
}

.line-height-tight {
  @include line-height-tight;
}
