@font-face {
    font-family: Roboto;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/tulp/roboto-regular.woff2") format("woff2");
}

@font-face {
    font-family: Roboto;
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/tulp/roboto-medium.woff2") format("woff2");
}

@font-face {
    font-family: Roboto;
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/tulp/roboto-light.woff2") format("woff2");
}

@font-face {
    font-family: Roboto;
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/tulp/roboto-bold.woff2") format("woff2");
}

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

    --base-color-canvas: #F2F4F7;
    --base-color-on-canvas-title: #000000;

    --base-color-on-surface: #757575;
    --base-color-on-surface-title: #000000;

    --base-color-inverse: #F2F4F7;
    --base-color-on-inverse: #000000;
    --base-color-on-inverse-muted: #000000;
    --base-color-on-inverse-title: #000000;

    --base-color-link: #B35320;
    --base-color-link-hover: #B35320;
    --base-color-link-active: #B35320;
    --base-color-link-visited: #B35320;

    --base-link-decoration: underline;

    --base-color-brand-primary: #757575;
    --base-color-brand-primary-hover: #883F18;
    --base-color-brand-primary-active: #883F18;
    --base-color-brand-primary-border: #757575;
    --base-color-brand-primary-border-hover: #693113;
    --base-color-on-brand-primary: #FFFFFF;
    --base-color-on-brand-primary-hover: #FFFFFF;

    --base-color-brand-secondary: #0693E3;
    --base-color-brand-secondary-hover: #0573B1;
    --base-color-brand-secondary-active: #0573B1;
    --base-color-brand-secondary-border: #0583CA;
    --base-color-brand-secondary-border-hover: #045C8F;
    --base-color-on-brand-secondary: #000000;
    --base-color-on-brand-secondary-hover: #FFFFFF;

    --base-color-brand-outline: transparent;
    --base-color-brand-outline-hover: #757575;
    --base-color-brand-outline-active: #883F18;
    --base-color-brand-outline-border: #757575;
    --base-color-brand-outline-border-hover: #757575;
    --base-color-on-brand-outline: #757575;
    --base-color-on-brand-outline-hover: #FFFFFF;

    --base-color-graph: #ef6f0b;

    --base-radius-interactive: 0.375rem;
    --base-radius-surface: 0.5rem;
}