/* NAWG Web - Main Site - Theming Styles */

/* For rounded boxes */
*
{
    border-radius: 2vh;
}

/* Basis for colour scheme */
:root
{
    --outer: #000060;
    --lite: #f0d080;
    --notice: #ff9000;
    --plain: #c0c0c0;
    --page: #b2d0b2;
    --article: #90d0f0;
}

/* Outer container elements */
html
{
    background-color: var(--outer);
}
body
{
    background-color: color-mix(in srgb, var(--outer) 85%, white 15%);
}
header, footer, main
{
    --start: color-mix(in srgb, var(--outer) 70%, white 30%);
    background-color: var(--start);
    background-image: linear-gradient(to bottom right, var(--start), #808080);
}

/* Header and footer */
header, footer
{
    color: var(--lite);
    & a, form.accounts input[type=submit]
    {
        color: #80c0ff;
    }
}
*.meta
{
    padding: 0.5em;
}

/* Panels and side-bar */
section#panels
{
    background-color: #6060a0;
    & div.tab
    {
        background-color: #60a0e0;
        &.active
        {
            background-color: #c0e0f0;
        }
    }
}
section#side-bar
{
    background-color: var(--lite);
}

/* Main containers */
section, article
{
    background-color: var(--plain);
}

/* Emphasised content */
nav > section
{
    background-color: var(--lite);
    & > menu
    {
        background-color: color-mix(in srgb, var(--lite) 70%, white 30%);
    }
}
*.lite
{
    background-color: var(--lite);
    & *.lite
    {
        background-color: color-mix(in srgb, var(--lite) 70%, white 30%);
    }
}
*.notice
{
    background-color: var(--notice);
}

/* Miscellaneous */
a.button, button, input[type="submit"], input[type="reset"], input[type="button"]
{
    border-top: 2px solid #e0e0e0;
    border-bottom: 2px solid #808080;
    border-left: 2px solid #d0d0d0;
    border-right: 2px solid #a0a0a0;
    background-color: #a0a0a0;
    background-image: linear-gradient(to bottom right, #a0a0a0, #d0d0d0);
    &:not(a)
    {
        padding: 0.4em;
    }
}

/* Colour schemes according to component type */
*.article
{
    background-color: var(--article);
    & *.article, *.public, *.member, article:not([class]), section:not([class]), table:not([class])
    {
        background-color: color-mix(in srgb, var(--article) 80%, white 20%);
        & *.article, *.public, *.member, article:not([class]), section:not([class]), table:not([class])
        {
            background-color: color-mix(in srgb, var(--article) 60%, white 40%);
        }
    }
}
*.page
{
    background-color: var(--page);
    & *.page, *.public, *.member, article:not([class]), section:not([class]), table:not([class])
    {
        background-color: color-mix(in srgb, var(--page) 80%, white 20%);
        & *.page, *.public, *.member, article:not([class]), section:not([class]), table:not([class])
        {
            background-color: color-mix(in srgb, var(--page) 60%, white 40%);
        }
    }
}
*.document
{
    background-color: var(--plain);
    & *.document, *.public, *.member, article:not([class]), section:not([class]), table:not([class])
    {
        background-color: color-mix(in srgb, var(--plain) 80%, white 20%);
        & *.document, *.public, *.member, article:not([class]), section:not([class]), table:not([class])
        {
            background-color: color-mix(in srgb, var(--plain) 60%, white 40%);
        }
    }
}
*.person
{
    background-color: var(--lite);
    & *.person, *.public, *.member, article:not([class]), section:not([class]), table:not([class])
    {
        background-color: color-mix(in srgb, var(--lite) 70%, white 30%);
        & *.person, *.public, *.member, article:not([class]), section:not([class]), table:not([class])
        {
            background-color: color-mix(in srgb, var(--lite) 50%, white 50%);
        }
    }
}