@font-face {
    font-family: 'Akkurat';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/triodos/akkurat-light.woff2') format('woff2');
}

@font-face {
    font-family: 'Akkurat';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/triodos/akkurat-normal.woff2') format('woff2');
}

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

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

    --base-color-on-canvas: #00006B;
    --base-color-on-canvas-title: #00006B;

    --base-color-on-surface: #00006B;
    --base-color-on-surface-title: #00006B;

    --base-color-inverse: #00006B;
    --base-color-on-inverse: #FFFFFF;
    --base-color-on-inverse-muted: #FFFFFF;
    --base-color-on-inverse-title: #FFFFFF;

    --base-color-link: #00006B;
    --base-color-link-hover: #00006B;
    --base-color-link-active: #00006B;
    --base-color-link-visited: #00006B;

    --base-link-decoration: underline;

    --base-color-brand-primary: #4BF0B9;
    --base-color-brand-primary-hover: #1CECA7;
    --base-color-brand-primary-active: #1CECA7;
    --base-color-brand-primary-border: #4BF0B9;
    --base-color-brand-primary-border-hover: #12D392;
    --base-color-on-brand-primary: #00006B;
    --base-color-on-brand-primary-hover: #00006B;

    --base-color-brand-outline: transparent;
    --base-color-brand-outline-hover: #4BF0B9;
    --base-color-brand-outline-active: #1CECA7;
    --base-color-brand-outline-border: #4BF0B9;
    --base-color-brand-outline-border-hover: #4BF0B9;
    --base-color-on-brand-outline: #00006B;
    --base-color-on-brand-outline-hover: #00006B;

    --base-color-graph: #00947b;
    
    --base-radius-interactive: 0.375rem;
    --base-radius-surface: 0.1875rem;

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