@font-face {
    font-family: 'Satoshi';
    src: url('/assets/webfonts/satoshi/Satoshi-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/assets/webfonts/satoshi/Satoshi-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/assets/webfonts/satoshi/Satoshi-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Display';
    src: url('/assets/webfonts/clash-display/ClashDisplay-Regular.woff2')
        format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Display';
    src: url('/assets/webfonts/clash-display/ClashDisplay-Medium.woff2')
        format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Grotesk';
    src: url('/assets/webfonts/clash-grotesk/ClashGrotesk-Regular.woff2')
        format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Grotesk';
    src: url('/assets/webfonts/clash-grotesk/ClashGrotesk-Medium.woff2')
        format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HK Grotesk';
    src: url('/assets/webfonts/hk-grotesk/hkgrotesk-regular-webfont.woff2')
        format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HK Grotesk';
    src: url('/assets/webfonts/hk-grotesk/hkgrotesk-medium-webfont.woff2')
        format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HK Grotesk';
    src: url('/assets/webfonts/hk-grotesk/hkgrotesk-semibold-webfont.woff2')
        format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HK Grotesk';
    src: url('/assets/webfonts/hk-grotesk/hkgrotesk-italic-webfont.woff2')
        format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    --font-inter: 'Clash Grotesk';
    --font-dm-sans: 'Satoshi';
    --font-roboto: 'Satoshi';
    --font-epilogue: 'Clash Display';
    --font-poppins: 'HK Grotesk';
    --font-jakarta-sans: 'HK Grotesk';
}