@use "../mixins/fonts";

@font-face {
  font-family: CircularXX;
  src: url("/assets/fonts/CircularXXWeb-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: CircularXX;
  src: url("/assets/fonts/CircularXXWeb-Book.woff2") format("woff2");
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}

html {
  font-size: var(--font-size-standard);
}

body {
  font-family: "CircularXX", sans-serif;
  font-weight: 400;
  line-height: var(--line-height-standard);
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0 0 var(--padding-0_5x);
}

p {
  margin: 0 0 var(--padding-3x);
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}

:root {
  --font-size-huge: calc(var(--font-size-h1) * 1.5);
  --font-size-h1: 1.7142857143rem; // 24px / 14px
  --font-size-h2: 1.428571428571429rem; // 20px / 14px
  --font-size-h3: 1.285714285714286rem; // 18px / 14px
  --font-size-h4: 1.142857142857143rem; // 16px / 14px
  --font-size-h5: 1rem;
  --font-size-standard: 16px;
  --font-size-small: 0.785714285714286rem; // 11px / 14px

  --line-height-h1: 1.333333333333333; // 32
  --line-height-h2: 1.3; // 26
  --line-height-h3: 1.333333333333333; // 24
  --line-height-h4: 1.25; // 20
  --line-height-h5: var(--line-height-standard);
  --line-height-standard: 1.142857142857143; // 16 / 14 because 14px was the original base font size defined by the designer to calculate that family of font sizes
  --line-height-small: 1.181818181818182; // 13

  --font-weight-bold: 450;
}

h1 {
  @include fonts.h1;
}

h2 {
  @include fonts.h2;
}

h3 {
  @include fonts.h3;
}

h4 {
  @include fonts.h4;
}

h5 {
  @include fonts.h5;
}

small,
.text_small {
  @include fonts.small;
}

a,
button {
  @include fonts.standard;
}