/* Use only light mode for this cut of Toolkit */
:root {
    --background-color: #E8EAF6;
    --main-title-color: #512DA8;
    --menu-color: #512DA8;
    --text-color: #000000;
    --alternate-text-color: #000000;
    --link-color: #006bb7;
    --alternate-link-color: #006bb7;
    --button-bg: darkgreen;
    --button-color: #ffffff;
    --button-border-color: forestgreen;
    --flex-responsive-size: 400px;
    --heading3-color: darkviolet;
    --border-color: darkviolet;
    --label-color: brown;
}



@media (max-width: 768px) {
    .container

{
    padding: 1rem;
}

:root {
    --alternate-text-color: #ffffff;
    --alternate-background: #512DA888;
    --alternate-link-color: turquoise;
    --navbar-brand-height: 12pt;
}

}


@media (min-width: 769px) {
    .container

    {
        padding: 2rem;
    }

    :root {
        --alternate-background: #E8EAF6;
        --flex-responsive-size: 540px;
        --navbar-brand-height: 16pt;
    }

}




/*
// Light mode base styles
@media (prefers-color-scheme: light) {
    :root {
        --background-color: #E8EAF6;
        --main-title-color: #512DA8;
        --menu-color: #512DA8;
        --text-color: #000000;
        --alternate-text-color: #000000;
        --link-color: #006bb7;
        --alternate-link-color: #006bb7;
        --button-bg: darkgreen;
        --button-color: #ffffff;
        --button-border-color: forestgreen;
        --flex-responsive-size: 400px;
        --heading3-color: darkviolet;
        --border-color: darkviolet;
        --label-color: brown;
    }
}

//Light mode + Mobile
@media (prefers-color-scheme: light) and (max-width: 768px) {
    .container {
        padding: 1rem;
    }

    :root {
        --alternate-text-color: #ffffff;
        --alternate-background: #512DA888;
        --alternate-link-color: turquoise;
        --navbar-brand-height: 12pt;
    }
}

// Light mode + Desktop
@media (prefers-color-scheme: light) and (min-width: 769px) {
    .container {
        padding: 2rem;
    }

    :root {
        --alternate-background: #E8EAF6;
        --flex-responsive-size: 540px;
        --navbar-brand-height: 16pt;
    }
}


// Dark mode base styles 
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #262626;
        --alternate-background: #262626;
        --main-title-color: #E2D9F3;
        --menu-color: #E2D9F3;
        --text-color: #e2d9f3;
        --alternate-text-color: #e2d9f3;
        --link-color: #80bfff;
        --alternate-link-color: #80bfff;
        --button-bg: mediumpurple;
        --button-color: #ffffff;
        --button-border-color: purple;
        --flex-responsive-size: 400px;
        --heading3-color: aqua;
        --border-color: #888;
        --label-color: lightyellow;
    }

    .table {
        background-color: #1e1e1e; // base background
        color: #e2d9f3; //
        border-color: #444; /// darker borders 
    }

        .table th,
        .table td {
            color: #e2d9f3;
            background-color: #2a2a2a; // darker header/cell
        }

    .table-striped > tbody > tr:nth-of-type(odd) {
        background-color: #2b2b2b;
    }

    .table-hover tbody tr:hover {
        background-color: #3a3a3a;
    }
}

// Dark mode + Mobile
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .container {
        padding: 1rem;
    }

    :root {
        --background-color: #171717;
        --alternate-background: #171717;
        --navbar-brand-height: 12pt;
    }
}

// Dark mode + Desktop
@media (prefers-color-scheme: dark) and (min-width: 769px) {
    .container {
        padding: 2rem;
    }

    :root {
        --flex-responsive-size: 540px;
        --navbar-brand-height: 16pt;
    }
}
    */