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

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

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

    --base-color-canvas: #000000;
    --base-color-on-canvas: #FFFFFF;
    --base-color-on-canvas-muted: #a1a1a1;
    --base-color-on-canvas-title: #FFFFFF;

    --base-color-surface: #303030;
    --base-color-on-surface: #FFFFFF;
    --base-color-on-surface-muted: #999999;
    --base-color-on-surface-title: #FFFFFF;
    
    --base-color-inverse: #000000;
    --base-color-on-inverse: #FFFFFF;
    --base-color-on-inverse-muted: #FFFFFF;
    --base-color-on-inverse-title: #FFFFFF;

    --base-color-link: #FFFFFF;
    --base-color-link-hover: #999999;
    --base-color-link-active: #999999;
    --base-color-link-visited: #999999;

    --base-focus-ring-color: #ffffff;

    --base-color-border-weak: #888888;

    --base-color-border: #555555;

    --base-color-border-strong: #000000;
    --base-color-border-strong-hover: #555555       ;

    --base-color-brand-primary: #FF6A00;
    --base-color-brand-primary-hover: #E55F00;
    --base-color-brand-primary-active: #E55F00;
    --base-color-brand-primary-border: #FF6A00;
    --base-color-brand-primary-border-hover: #C15000;
    --base-color-on-brand-primary: #000000;
    --base-color-on-brand-primary-hover: #000000;

    --base-color-brand-secondary: #0080FF;
    --base-color-brand-secondary-hover: #0066CC;
    --base-color-brand-secondary-active: #0066CC;
    --base-color-brand-secondary-border: #0073E6;
    --base-color-brand-secondary-border-hover: #0054A8;
    --base-color-on-brand-secondary: #000000;
    --base-color-on-brand-secondary-hover: #FFFFFF;

    --base-color-brand-outline: transparent;
    --base-color-brand-outline-hover: #FF6A00;
    --base-color-brand-outline-active: #E55F00;
    --base-color-brand-outline-border: #FF6A00;
    --base-color-brand-outline-border-hover: #FF6A00;
    --base-color-on-brand-outline: #FF6A00;
    --base-color-on-brand-outline-hover: #000000;

    --base-color-graph: #47bfff;

    --base-color-on-loan-part-3: #ffffff;
    --base-color-on-loan-part-4: #ffffff;
    --base-color-on-loan-part-5: #ffffff;

    --base-radius-interactive: 999px;
    --base-radius-surface: 1.25rem;
    
    --sds-hero-img-visibility: none;
}