@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/munt/opensans-light.woff2") format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/munt/opensans-regular.woff2") format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/munt/opensans-medium.woff2") format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/munt/opensans-semibold.woff2") format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/munt/opensans-bold.woff2") format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/munt/opensans-extrabold.woff2") format('woff2');
}

@font-face {
    font-family: 'Serifa';
    src: url('../fonts/munt/serifa-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --base-fontface-title: Serifa, serif;
    --base-fontface-body: Open Sans, sans-serif; 
    --base-fontface-button: Open Sans, sans-serif;

    --base-font-transform: uppercase;

    --base-color-on-canvas: #272525;
    --base-color-on-canvas-title: #272525;

    --base-color-on-surface: #272525;
    --base-color-on-surface-muted: #666666;
    --base-color-on-surface-title: #272525;

    --base-color-inverse: #00D796;
    --base-color-on-inverse: #272525;
    --base-color-on-inverse-muted: #272525;
    --base-color-on-inverse-title: #272525;

    --base-color-link: #00875F;
    --base-color-link-hover: #00875F;
    --base-color-link-active: #00875F;
    --base-color-link-visited: #00875F;

    --base-link-decoration: underline;

    --base-color-brand-primary: #00D796;
    --base-color-brand-primary-hover: #00A472;
    --base-color-brand-primary-active: #00A472;
    --base-color-brand-primary-border: #00D796;
    --base-color-brand-primary-border-hover: #00805A;
    --base-color-on-brand-primary: #000000;
    --base-color-on-brand-primary-hover: #000000;

    --base-color-brand-outline: transparent;
    --base-color-brand-outline-hover: #00D796;
    --base-color-brand-outline-active: #00A472;
    --base-color-brand-outline-border: #00D796;
    --base-color-brand-outline-border-hover: #00D796;
    --base-color-on-brand-outline: #000000;
    --base-color-on-brand-outline-hover: #000000;

    --base-color-graph: #00d796;

    --base-radius-interactive: 999px; 
    --base-radius-surface: 0;

    --sds-header-link-fg-hover: var(--base-color-on-surface);
}