@font-face {
    font-display: swap;
    font-family: GT Ultra Median;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/lloyds/gt-ultra-median-regular.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: GT Ultra Median;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/lloyds/gt-ultra-median-bold.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: GT Ultra Standard;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/lloyds/gt-ultra-standard-regular.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: GT Ultra Standard;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/lloyds/gt-ultra-standard-bold.woff2) format("woff2")
}

:root {
    --base-fontface-title: GT Ultra Median, sans-serif;
    --base-fontface-body: GT Ultra Standard, sans-serif;
    --base-fontface-button: GT Ultra Standard, sans-serif;

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

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

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

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

    --base-link-decoration: underline;
    --base-link-decoration-hover: none;
    --base-button-decoration-hover: underline;

    --base-color-brand-primary: #000000;
    --base-color-brand-primary-hover: #0D4937;
    --base-color-brand-primary-active: #0D4937;
    --base-color-brand-primary-border: #157458;
    --base-color-brand-primary-border-hover: #082B20;
    --base-color-on-brand-primary: #FFFFFF;
    --base-color-on-brand-primary-hover: #FFFFFF;

    --base-color-brand-secondary: #11b67a;
    --base-color-brand-secondary-hover: #000000;
    --base-color-brand-secondary-active: #000000;
    --base-color-brand-secondary-border: #000000;
    --base-color-brand-secondary-border-hover: #000000;
    --base-color-on-brand-secondary: #000000;
    --base-color-on-brand-secondary-hover: #FFFFFF;

    --base-color-brand-outline: transparent;
    --base-color-brand-outline-hover: #000000;
    --base-color-brand-outline-active: #0D4937;
    --base-color-brand-outline-border: #000000;
    --base-color-brand-outline-border-hover: #000000;
    --base-color-on-brand-outline: #000000;
    --base-color-on-brand-outline-hover: #FFFFFF;

    --base-color-graph: #006a4d;

    --base-color-on-loan-part-1: #ffffff;
    
    --base-radius-interactive: 0.75rem;
    --base-radius-surface: 1.25rem;

    --sds-header-bg: var(--base-color-brand-secondary);
    --sds-header-fg: var(--base-color-on-brand-secondary);
    --sds-header-border: var(--sds-border-divider);

    --sds-header-link-fg: var(--sds-header-fg);
    --sds-header-link-bg-hover: var(--base-color-white);
    --sds-header-link-fg-hover: var(--base-color-brand-primary);

    --sds-header-link-decoration: none;
    --sds-header-link-decoration-hover: underline;

    --sds-header-indicator-size: 0;
    --sds-header-indicator-color: var(--base-color-brand-primary);

    --sds-header-drawer-bg: var(--base-color-surface);
    --sds-header-drawer-fg: var(--base-color-on-surface);
    --sds-header-backdrop-bg: rgba(0, 0, 0, 0.2);
}