@font-face {
    font-family: 'Asap';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/obvion/asap-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Asap';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/obvion/asap-medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Asap';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/obvion/asap-semibold.woff2') format('woff2');
}

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

:root {
    --base-fontface-title: "Asap", sans-serif;
    --base-fontface-body: "Asap", sans-serif;
    --base-fontface-button: "Asap", sans-serif;

    --base-color-on-canvas: #343434;
    --base-color-on-canvas-muted: #595959;
    --base-color-on-canvas-title: #A61462;

    --base-color-on-surface: #343434;
    --base-color-on-surface-title: #A61462;

    --base-color-on-inverse: #A61462;
    --base-color-on-inverse-muted: #A61462;
    --base-color-on-inverse-title: #A61462;

    --base-link-decoration: underline;
    --base-link-decoration-hover: none;
    
    --base-color-link: #A61462;
    --base-color-link-hover: #A61462;
    --base-color-link-active: #A61462;
    --base-color-link-visited: #A61462;

    --base-color-brand-primary: #A61462;
    --base-color-brand-primary-hover: #780F47;
    --base-color-brand-primary-active: #780F47;
    --base-color-brand-primary-border: #8F1155;
    --base-color-brand-primary-border-hover: #590B34;
    --base-color-on-brand-primary: #FFFFFF;
    --base-color-on-brand-primary-hover: #FFFFFF;

    --base-color-brand-outline: transparent;
    --base-color-brand-outline-hover: #A61462;
    --base-color-brand-outline-active: #780F47;
    --base-color-brand-outline-border: #A61462;
    --base-color-brand-outline-border-hover: #A61462;
    --base-color-on-brand-outline: #A61462;
    --base-color-on-brand-outline-hover: #FFFFFF;

    --base-color-graph: #A61462;

    --base-color-on-loan-part-1: #ffffff;
    --base-color-on-loan-part-2: #ffffff;
    
    --base-radius-interactive: 0.4rem;
    --base-radius-surface: 0.8rem;
    
    --sds-hero-img-pos: top center;
}