@import 'fonts/fonts.css';
@import 'design-tokens/dark/design-tokens-px.min.css';
@import 'design-tokens/light/design-tokens-px.min.css';

:root {
    --scalar-font: var(--mds_brand_typography_text_font-family, --mds_brand_typography_text_font-family-fallback);
    --scalar-border-width: var(--mds_global_border_width);
    --scalar-custom-header-height: 60px;
}

.light-mode {
    --scalar-color-1: var(--mds_brand_appearance_neutral_default_text-color);
    --scalar-color-2: var(--mds_brand_appearance_neutral_weak_text-color);
    --scalar-color-3: var(--mds_brand_appearance_neutral_weakest_text-color);
    --scalar-color-accent: var(--mds_brand_appearance_info_default_text-color);
    --scalar-link-color: var(--scalar-color-accent);
    --scalar-border-color: var(--mds_brand_appearance_neutral_default_border-color);
    --scalar-background-1: var(--mds_brand_appearance_neutral_default_background-color);
    --scalar-background-2: var(--mds_brand_appearance_neutral_weak_background-color);
    --scalar-background-3: var(--mds_brand_appearance_neutral_weakest_background-color);
    --scalar-background-accent: var(--mds_brand_appearance_primary_weak_background-color);
    --scalar-sidebar-item-active-background: var(--mds_brand_appearance_primary_weak_on-background-color);
}

.dark-mode {
    --scalar-color-1: var(--mds_brand_appearance_neutral_default_text-color);
    --scalar-color-2: var(--mds_brand_appearance_neutral_weak_text-color);
    --scalar-color-3: var(--mds_brand_appearance_neutral_weakest_text-color);
    --scalar-color-accent: var(--mds_brand_appearance_info_default_text-color);
    --scalar-link-color: var(--scalar-color-accent);
    --scalar-border-color: var(--mds_brand_appearance_neutral_default_border-color);
    --scalar-background-1: var(--mds_brand_appearance_neutral_default_background-color);
    --scalar-background-2: var(--mds_brand_appearance_neutral_weak_background-color);
    --scalar-background-3: var(--mds_brand_appearance_neutral_weakest_background-color);
    --scalar-background-accent: var(--mds_brand_appearance_primary_weak_background-color);
    --scalar-sidebar-item-active-background: var(--mds_brand_appearance_primary_weak_on-background-color);
}

.section-header {
    font-family: var(--mds_brand_typography_headline_font-family, --mds_brand_typography_headline_font-family-fallback) !important;
    font-weight: 300 !important;
}

.custom-header {
    height: var(--scalar-custom-header-height);
    background-color: var(--scalar-background-1);
    box-shadow: inset 0 -1px 0 var(--scalar-border-color);
    color: var(--scalar-color-1);
    font-size: var(--scalar-font-size-2);
    padding: 0 18px;
    position: sticky;
    justify-content: space-between;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
}

    .custom-header, .custom-header nav {
        display: flex;
        align-items: center;
        gap: 18px;
    }

.logo-and-product {
    display: flex;
    align-items: center;
    text-decoration: none;
}

    .logo-and-product .logo {
        line-height: 0;
        width: 25px;
        height: 26px;
        background-image: var(--mds_brand_appearance_static_logo);
    }

    .logo-and-product .product {
        align-items: center;
        padding-left: 20px;
        font-style: var(--mds_brand_typography_text_large_medium_font-style);
        font-weight: var(--mds_brand_typography_text_large_medium_font-weight);
    }

    .logo-and-product .product::before {
        content: "";
        border-right: 1px solid var(--mds_brand_appearance_neutral_default_border-color);
        height: 26px;
        margin-right: 16px;
        width: 0px;
    }

.property-description > div > p > a:not(:root) {
    color: var(--scalar-link-color) !important;
}