@import "../helpers";

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

:root {
  font-size: 11px;
  // 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.75rem; //12px
  --font-size--sm: 0.875rem; //14px
  --font-size--base: 1rem; //11px
  --font-size--lg: 1.125rem; //18px
  --font-size--xl: 1.25rem; //20px
  --font-size--xxl: 1.5rem; //24px
  // heading font-size
  --h1-font-size: 1.5rem; //24px
  --h2-font-size: 1.5rem; //24px
  --h3-font-size: var(--font-size--lg); //18px
  --h4-font-size: var(--font-size--lg); //18px
  --h5-font-size: var(--font-size--base); //16px
  --h6-font-size: var(--font-size--base); //16px
  @include for-desktop-hd {
    font-size: 16px;
    // font-size
    --font-size--xs: 0.75rem; //12px
    --font-size--sm: 0.875rem; //14px
    --font-size--base: 1rem; //16px
    --font-size--lg: 1.125rem; //18px
    --font-size--xl: 1.25rem; //20px
    --font-size--xxl: 1.5rem; //24px

    --h1-font-size: 2.625rem; //42px
    --h2-font-size: 2.25rem; //36px
    --h3-font-size: 1.625rem; //26px
    --h4-font-size: 1.25rem; //20px
    --h5-font-size: var(--font-size--base); //16px
    --h6-font-size: var(--font-size--sm); //14px
  }	  
}