@use "../config";
@use "../utils/generators";
@use "../utils/helpers";

//stylelint-disable color-named

html {
  font-size: config.$base-font-size;
  line-height: config.$line-height;
}

body {
  color: helpers.color('foreground');
  font-family: config.$paragraph-font;
  background-color: helpers.color('background');
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@include generators.typography-generator(config.$typography);

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: config.$heading-font;
}

.font-paragraph {
  font-family: config.$paragraph-font !important;
}

.font-heading {
  font-family: config.$heading-font !important;
}

.font-mono {
  font-family: config.$mono-font !important;
}

//TODO: Prefer font over text for weight utility classes in v1.1.0

.text-thin,
.font-thin {
  font-weight: 100 !important;
}

.text-ultra-light,
.font-ultra-light {
  font-weight: 200 !important;
}

.text-light,
.font-light {
  font-weight: 300 !important;
}

.text-normal,
.font-normal {
  font-weight: 400 !important;
}

.text-medium,
.font-medium {
  font-weight: 500 !important;
}

.text-semi-bold,
.font-semi-bild {
  font-weight: 600 !important;
}

.text-bold,
.font-bold {
  font-weight: 700 !important;
}

.text-ultra-bold,
.font-ultra-bold {
  font-weight: 800 !important;
}

.text-heavy
.font-black {
  font-weight: 900 !important;
}

.text-lighter,
.font-lighter {
  font-weight: lighter !important;
}

.text-bolder,
.font-bolder {
  font-weight: bolder !important;
}

@include generators.utility-class-generator('text', 'text-align', ('left', 'right', 'center'), '', '', false, true);

.text-italic,
.font-italic {
  font-style: italic;
}

@include generators.utility-class-generator('text', 'text-decoration', ('underline', 'overline', 'line-through', (value: 'none', alias: 'text-decoration-none')), '', '', false, true);
@include generators.utility-class-generator('text', 'text-transform', ('uppercase', 'lowercase', 'capitalize', 'full-width', (value: 'none', prefix: 'text-transform')), '', '', false, true);

h1 {
  margin-bottom: 0.33em;
}

h2 {
  margin-bottom: 0.42em;
}

h3 {
  margin-bottom: 0.5em;
}

h4 {
  margin-bottom: 0.65em;
}

h5 {
  margin-bottom: 0.8em;
}

h6 {
  margin-bottom: 1em;
}

.text-nowrap {
  white-space: nowrap;
}