@font-face {
    font-family: "Jukebox Johnny";
    src: url("/demos/mtm/fonts/JukeboxJohnny-Regular.woff2") format("woff2"),
         url("/demos/mtm/fonts/JukeboxJohnny-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Matimo";
    src: url("/demos/mtm/fonts/Matimo-Regular.woff2") format("woff2"),
         url("/demos/mtm/fonts/Matimo-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Matimo";
    src: url("/demos/mtm/fonts/Matimo-Medium.woff2") format("woff2"),
         url("/demos/mtm/fonts/Matimo-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Matimo";
    src: url("/demos/mtm/fonts/Matimo-SemiBold.woff2") format("woff2"),
         url("/demos/mtm/fonts/Matimo-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Matimo";
    src: url("/demos/mtm/fonts/Matimo-ExtraBold.woff2") format("woff2"),
         url("/demos/mtm/fonts/Matimo-ExtraBold.woff") format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Matimo";
    src: url("/demos/mtm/fonts/Matimo-Black.woff2") format("woff2"),
         url("/demos/mtm/fonts/Matimo-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --mtm-font-display: "Jukebox Johnny", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --mtm-font-sans: "Matimo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --cnvs-body-font: var(--mtm-font-sans);
    --cnvs-primary-font: var(--mtm-font-display);
    --cnvs-secondary-font: var(--mtm-font-sans);
    --cnvs-primary-menu-font: var(--cnvs-primary-font);
    --cnvs-primary-menu-font-size: 13px;
    --cnvs-primary-menu-font-weight: 700;
    --cnvs-primary-menu-tt: uppercase;
    --cnvs-primary-menu-ls: 1px;
}

html,
body,
button,
input,
select,
textarea,
.btn,
.button,
.form-control,
.form-select,
.input-group-text,
.modal,
.offcanvas,
.sf-header,
.sf-footer {
    font-family: var(--mtm-font-sans);
}

h1,
.h1 {
    font-family: var(--mtm-font-display);
}

h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: var(--mtm-font-sans);
}

.sf-header .sf-nav-link {
    font-family: var(--cnvs-primary-menu-font);
    font-size: var(--cnvs-primary-menu-font-size);
    font-weight: var(--cnvs-primary-menu-font-weight);
    letter-spacing: var(--cnvs-primary-menu-ls);
    line-height: 22px;
    text-transform: var(--cnvs-primary-menu-tt);
}

.sf-header .sf-nav-link i {
    font-size: var(--cnvs-primary-menu-icon-size, 1rem);
}