@font-face {
    font-family: 'Georgia';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/acier/georgia.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/acier/open-sans-light.woff2') format('woff2');
}
@font-face {
    font-family: 'Open Sans';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/acier/open-sans-bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Open Sans';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/acier/open-sans-semibold.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/acier/roboto-light.woff2') format('woff2');
}

:root {
    --base-fontface-title: Georgia, sans-serif;
    --base-fontface-body: Open Sans, sans-serif;
    --base-fontface-button: Open Sans, sans-serif;
    
    --base-color-canvas: #F5F5F5;
    --base-color-on-canvas: #666666;
    --base-color-on-canvas-muted: #6A6A6A;
    --base-color-on-canvas-title: #622181;

    --base-color-on-surface: #666666;
    --base-color-on-surface-title: #622181;

    --base-color-inverse: #333333;
    --base-color-on-inverse: #EEEEEE;
    --base-color-on-inverse-muted: #EEEEEE;
    --base-color-on-inverse-title: #EEEEEE;

    --base-color-link: #14679E;
    --base-color-link-hover: #14679E;
    --base-color-link-active: #14679E;
    --base-color-link-visited: #14679E;

    --base-color-brand-primary: #622181;
    --base-color-brand-primary-hover: #431758;
    --base-color-brand-primary-active: #431758;
    --base-color-brand-primary-border: #531C6D;
    --base-color-brand-primary-border-hover: #2E0F3C;
    --base-color-on-brand-primary: #FFFFFF;
    --base-color-on-brand-primary-hover: #FFFFFF;

    --base-color-brand-secondary: #14679E;
    --base-color-brand-secondary-hover: #0E4971;
    --base-color-brand-secondary-active: #0E4971;
    --base-color-brand-secondary-border: #115887;
    --base-color-brand-secondary-border-hover: #0A3551;
    --base-color-on-brand-secondary: #FFFFFF;
    --base-color-on-brand-secondary-hover: #FFFFFF;

    --base-color-brand-outline: transparent;
    --base-color-brand-outline-hover: #622181;
    --base-color-brand-outline-active: #431758;
    --base-color-brand-outline-border: #622181;
    --base-color-brand-outline-border-hover: #622181;
    --base-color-on-brand-outline: #622181;
    --base-color-on-brand-outline-hover: #FFFFFF;

    --base-color-graph: #622181;
    
    --base-color-on-loan-part-1: #ffffff;
    --base-color-on-loan-part-2: #ffffff;
    
    --base-radius-interactive: 0.1875rem;
    --base-radius-surface: 0.1875rem;
}