/* import variables/mixins/reset */
@use './variables/index.scss';
@use './mixins/typography.scss';
@use './reset.scss';

/* include everett fonts locally */
@font-face {
  font-family: 'TWK Everett';
  src: url(../assets/fonts/TWKEverett-Ultralight-web.woff2) format('woff2'),
    url(../assets/fonts/TWKEverett-Ultralight-web.woff) format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TWK Everett';
  src: url(../assets/fonts/TWKEverett-Light-web.woff2) format('woff2'),
    url(../assets/fonts/TWKEverett-Light-web.woff) format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TWK Everett';
  src: url(../assets/fonts/TWKEverett-Regular-web.woff2) format('woff2'),
    url(../assets/fonts/TWKEverett-Regular-web.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TWK Everett';
  src: url(../assets/fonts/TWKEverett-Medium-web.woff2) format('woff2'),
    url(../assets/fonts/TWKEverett-Medium-web.woff) format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TWK Everett';
  src: url(../assets/fonts/TWKEverett-Bold-web.woff2) format('woff2'),
    url(../assets/fonts/TWKEverett-Bold-web.woff) format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* include roboto fonts locally */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(../assets/fonts/roboto-latin-300-normal.woff2) format('woff2'),
    url(../assets/fonts/roboto-latin-300-normal.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../assets/fonts/roboto-latin-400-normal.woff2) format('woff2'),
    url(../assets/fonts/roboto-latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(../assets/fonts/roboto-latin-400-italic.woff2) format('woff2'),
    url(../assets/fonts/roboto-latin-400-italic.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../assets/fonts/roboto-latin-500-normal.woff2) format('woff2'),
    url(../assets/fonts/roboto-latin-500-normal.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(../assets/fonts/roboto-latin-500-italic.woff2) format('woff2'),
    url(../assets/fonts/roboto-latin-500-italic.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* include roboto mono fonts locally for displayed code snippets */
@font-face {
  font-family: 'Roboto Mono';
  src: url('../assets/fonts/RobotoMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  unicode-range: U+0000-00FF, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215;
}

/* define any inheritable styles that we want to pierce the shadow dom */
html {
  height: 100%;
}

body {
  min-height: 100vh;
  background: var(--kd-color-background-page-default);
  color: var(--kd-color-text-level-primary);
  @include typography.type-body-02;
}