/* ------------------------------------------------*/
/* Contrast Color Scheme Classes */
/* ------------------------------------------------*/

/* Default color scheme (light mode) */
.mxd-contrast-section {
    background-color: var(--base);

    /* Swap base and contrast colors for contrast sections */
    --base: var(--fire-brick);
    --base-rgb: var(--fire-brick-rgb);
    --base-tint: var(--fire-brick);
    --base-shade: var(--falu-red);
    --base-opp: var(--white);
    --base-opp-tint: #f5f5f5;
    
    --contrast: var(--white);
    --contrast-rgb: var(--white-rgb);
    
    /* Invert text colors for readability */
    --t-bright: var(--white);
    --t-medium: #cccccc;
    --t-muted: #b3b3b3;
    --t-muted-extra: #999999;
    --t-opp-bright: var(--oxford-blue);
    --t-opp-medium: var(--raisin-black);
    --t-opp-muted: #666666;
    
    /* Invert stroke colors */
    --st-bright: var(--white);
    --st-medium: #cccccc;
    --st-muted: #b3b3b3;
    --st-opp-bright: var(--oxford-blue);
}

/* Header and Nav default styling - use fire brick instead of raisin black */
.mxd-header,
.mxd-nav__wrap {
    --base-opp: var(--fire-brick);
    --base-opp-tint: var(--fire-brick);
}

/* Header buttons styling - header buttons use fire brick */
.mxd-header .btn-outline {
    border-color: var(--fire-brick);
    color: var(--fire-brick);
}

/* Header and Nav contrast styling */
.mxd-header.mxd-in-contrast-section,
.mxd-nav__wrap.mxd-in-contrast-section {
    /* Apply contrast color scheme variables */
    --base: var(--fire-brick);
    --base-rgb: var(--fire-brick-rgb);
    --base-tint: var(--fire-brick);
    --base-shade: var(--falu-red);
    --base-opp: var(--white);
    --base-opp-tint: #f5f5f5;

    --contrast: var(--white);
    --contrast-rgb: var(--white-rgb);

    /* Invert text colors for readability */
    --t-bright: var(--white);
    --t-medium: #cccccc;
    --t-muted: #b3b3b3;
    --t-muted-extra: #999999;
    --t-opp-bright: var(--oxford-blue);
    --t-opp-medium: var(--raisin-black);
    --t-opp-muted: #666666;

    /* Invert stroke colors */
    --st-bright: var(--white);
    --st-medium: #cccccc;
    --st-muted: #b3b3b3;
    --st-opp-bright: var(--oxford-blue);
}

/* Header buttons styling when in contrast section */
.mxd-header.mxd-in-contrast-section .btn-outline {
    border-color: var(--white);
    color: var(--white);
}


/* SVG Landscape divider for smooth transitions between color schemes */
.landscape {
    height: 120px;
    width: 100%;
}