@import "../helpers";

// Font imports
@font-face {
  font-family: theinhardt-regular;
  src: url('~@highdigital/vuet/public/assets/storybook/fonts/Theinhardt-Regular.woff2') format('woff2'),
  url('~@highdigital/vuet/public/assets/storybook/fonts/Theinhardt-Regular.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: theinhardt-medium;
  src: url('~@highdigital/vuet/public/assets/storybook/fonts/Theinhardt-Medium.woff2') format('woff2'),
  url('~@highdigital/vuet/public/assets/storybook/fonts/Theinhardt-Medium.woff') format('woff');
  font-weight: 500;
  font-display: swap;
}

:root {
  font-size: 15px;
  // font-family
  --font-family--primary: "theinhardt-regular", sans-serif;
  --font-family--secondary: "theinhardt-medium", sans-serif;

  //font-weight
  --font-weight--light: 300;
  --font-weight--normal: 400;
  --font-weight--medium: 500;
  --font-weight--semibold: 600;
  --font-weight--bold: 700;

  // font-size
  --font-size--xs: 0.8rem; //12px
  --font-size--sm: 0.8rem; //12px
  --font-size--base: 1rem; //15px
  --font-size--md: 1.4rem; //21px
  --font-size--lg: 1.73333333rem; //26px
  --font-size--xl: 2rem; //30px
  --font-size--2xl: 2.33333333rem; //35px
  --font-size--3xl: 4rem; //70px

  // line-height
  --base-line-height: 1.33333333;
  --heading-line-height: 1.21428571;

  @include for-desktop {
    font-size: 16px;
    --font-size--xs: 0.75rem; //18px
    --font-size--sm: 0.83333333rem; //20px
    --font-size--base: 1rem; //24px
    --font-size--md: 1rem; //24px
    --font-size--lg: 1.5rem; //36px
    --font-size--xl: 2.33333333rem; //56px
    --font-size--2xl: 4.16666667rem; //100px
    --font-size--3xl: 4.16666667rem; //100px
  }

  @include for-desktop-l {
    font-size: 18px;
  }

  @include for-desktop-xl {
    font-size: 24px;
  }

  // heading font-size
  --h1-font-size: var(--font-size--2xl); //24px
  --h2-font-size: var(--font-size--xl); //56px
  --h3-font-size: var(--font-size--lg); //18px
  --h4-font-size: var(--font-size--base); //18px
  --h5-font-size: var(--font-size--base); //16px
  --h6-font-size: var(--font-size--base); //16px
}