/* define colors for each section of the site */
/* THESE MUST BE REPLICATED IN COLORS.PHP IN CONFIGURATION FILES */
:root {

    /* overall web site */
    --site-dark: #555753;
    --site-medium: #888a85;
    --site-light: #babdb6;

    /* Celebrity Goo Game */
    --goo-dark: #204a87;
    --goo-medium: #3465a4;
    --goo-light: #729fcf;

    /* Thorough Movie Reviews */
    --tmr-dark: #c4a000;
    --tmr-medium: #edd400;
    --tmr-light: #fce94f;

    /* Tragic Comedy */
    --tc-dark: #4e9a06;
    --tc-medium: #73d216;
    --tc-light: #8ae234;

    /* Rock Block */
    --rb-dark: #ce5c00;
    --rb-medium: #f57900;
    --rb-light: #fcaf3e;

}





/* standardize a "dark" and "medium" and "light" color for the current page on the site, based on the above variables and what site section is defined in the body tag */
body.site {
    --dark: var(--site-dark);
    --medium: var(--site-medium);
    --light: var(--site-light);
}
body.goo {
    --dark: var(--goo-dark);
    --medium: var(--goo-medium);
    --light: var(--goo-light);
}
body.tmr {
    --dark: var(--tmr-dark);
    --medium: var(--tmr-medium);
    --light: var(--tmr-light);
}
body.tc {
    --dark: var(--tc-dark);
    --medium: var(--tc-medium);
    --light: var(--tc-light);
}
body.rb {
    --dark: var(--rb-dark);
    --medium: var(--rb-medium);
    --light: var(--rb-light);
}





/* standardize a partially opaque version of each section's "light" color, for when the lightest-color elements need to be lightened on hover */
:root {
    --site-light-opaque: rgb(from var(--site-light) r g b / 0.75);
    --goo-light-opaque: rgb(from var(--goo-light) r g b / 0.75);
    --tmr-light-opaque: rgb(from var(--tmr-light) r g b / 0.75);
    --tc-light-opaque: rgb(from var(--tc-light) r g b / 0.75);
    --rb-light-opaque: rgb(from var(--rb-light) r g b / 0.75);
}





/* standardize header & footer colors that go across all sections */
:root {
    --header-footer-background: #eee;
    --header-footer-border: #d9d9d9;
}