@font-face {
    font-family: Maksimal;
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/lot/maksimal.woff2") format("woff2")
}

@font-face {
    font-family: Calibri;
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/lot/calibri-regular.woff2") format("woff2")
}

@font-face {
    font-family: Calibri;
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/lot/calibri-bold.woff2") format("woff2")
}


@font-face {
    font-family: Calibri;
    font-display: swap;
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/lot/calibri-regular-italic.woff2") format("woff2")
}

@font-face {
    font-family: Calibri;
    font-display: swap;
    font-style: italic;
    font-weight: 700;
    src: url("../fonts/lot/calibri-bold-italic.woff2") format("woff2")
}

@font-face {
    font-family: Sharp Grotesk;
    font-display: swap;
    font-style: italic;
    font-weight: 700;
    src: url("../fonts/lot/sharp-grotesk-bold.woff2") format("woff2")
}

:root {
    --base-fontface-title: Sharp Grotesk, sans-serif;
    --base-fontface-body: Calibri, sans-serif;
    --base-fontface-button: Calibri, sans-serif;

    --base-color-on-canvas: #2B245C;
    --base-color-on-canvas-title: #2B245C;

    --base-color-on-surface: #2B245C;
    --base-color-on-surface-title: #2B245C;

    --base-color-inverse: #E5006D;
    --base-color-on-inverse: #FFFFFF;
    --base-color-on-inverse-muted: #FFFFFF;
    --base-color-on-inverse-title: #FFFFFF;

    --base-color-link: #E5006D;
    --base-color-link-hover: #E5006D;
    --base-color-link-active: #E5006D;
    --base-color-link-visited: #E5006D;

    --base-color-brand-primary: #E5006D;
    --base-color-brand-primary-hover: #B20055;
    --base-color-brand-primary-active: #B20055;
    --base-color-brand-primary-border: #CC0061;
    --base-color-brand-primary-border-hover: #8E0044;
    --base-color-on-brand-primary: #FFFFFF;
    --base-color-on-brand-primary-hover: #FFFFFF;

    --base-color-brand-outline: transparent;
    --base-color-brand-outline-hover: #E5006D;
    --base-color-brand-outline-active: #B20055;
    --base-color-brand-outline-border: #E5006D;
    --base-color-brand-outline-border-hover: #E5006D;
    --base-color-on-brand-outline: #E5006D;
    --base-color-on-brand-outline-hover: #FFFFFF;

    --base-color-graph: #e7046e;

    --base-radius-interactive: 999px;
    --base-radius-surface: 0.9375rem;
}