:root {
    --primary-color: #535353;
    --secondary-color: var(--bg-dark-level-1);
	--secondary-color-text: var(--text-reverse);

	--primary-color-text: var(--text-reverse-static);
	--primary-color-dark: #003A66;
    
    --white: #ffffff;
    --lightest-gray: #f7f7f7;
    --lighter-gray: #d7d7d7;
    --light-gray: #cccccc;
    --gray: #888888;
    --dark-gray: #707070;
    --darker-gray: #555555;
    --darkest-gray: #333333;
    --black: #000000;
    --red: #d00000;
    --orange: #f6891f;
    --dark_red: #670D0D;
    --green: #77c034;
    --yellow: #ffd74e;
    --tan: #f5f4e4;
	--blue: #137cbd;
	--turquoise: #04a99f;

    /* -- main/foreground/text colors -- */
    --text-default: var(--darkest-gray);
    --text-default-static: var(--darkest-gray);
    --text-reverse: var(--white);
    --text-reverse-static: var(--white);
	
    --text-light: var(--darker-gray);
    --text-light-static: var(--darker-gray);
    --text-reverse-light: var(--lighter-gray);
    --text-reverse-light-static: var(--lighter-gray);
	
    --link-default: #b11616;
    --link-default-focus: var(--dark_red);
    --link-default-static: var(--red);
    --link-default-focus-static: var(--dark_red);
    --link-reverse: var(--lighter-gray);
    --link-reverse-static: var(--lighter-gray);
    --link-reverse-focus: var(--white);
    --link-reverse-static-focus: var(--white);

    /* -- background colors -- */
    --primary-background: var(--white);
    --primary-background-transparent: rgba(255,255,255, .95);
    --bg-level-2-transparent: rgba(240,240,240, .8);
    --bg-level-2: var(--lightest-gray);
    --bg-level-3: var(--lighter-gray);
    --bg-level-4: var(--light-gray);
    --bg-dark-level-1: var(--darkest-gray);
    --bg-dark-level-2: var(--darker-gray);
    --bg-dark-level-1-transparent: rgba(0,0,0,.35);
    --bg-light-contrast-green: var(--green);
    --bg-light-contrast-tan: var(--tan);
    --bg-light-contrast-yellow: var(--yellow);
    --bg-reverse-contrast-red: var(--red);
    --bg-lightest-contrast-green: #ddefcc;
	--bg-lightest-contrast-turquoise: #caf0f0;
	--bg-lightest-contrast-blue: #c0daec;
	--bg-lightest-contrast-yellow: #f3eea4;
	--bg-lightest-contrast-red: #f1b2b2;

    /* -- border colors -- */
    --border-lightest-contrast: var(--lightest-gray);
    --border-lighter-contrast: var(--lighter-gray);
    --border-light-contrast: var(--light-gray);
    --border-dark-contrast: var(--gray);
    --border-darker-contrast: var(--dark-gray);
    --border-darkest-contrast: var(--darker-gray);
    --border-shaddow: var(--darkest-gray);
    --border-shaddow-light: rgba(0,0,0,.4); 
    --border-shaddow-lightest: rgba(0,0,0,.1);
    --border-light-contrast-green: var(--green);
    --border-light-contrast-tan: var(--tan);
    --border-light-contrast-yellow: var(--yellow);
    --border-reverse-contrast-red: var(--red);
    --border-none-by-default: none;

    --scroll-widget-color: initial;
    --scrollbar-color: initial;
	/* -- track changes colors -- */
	--change-bg-color: #dff2f7;
	--change-solid-color: #05a4d4;
	--change-add-color: #83E0FC;
	--change-delete-color: #faaaaa;
	--change-text-color: #034154;

    /* -- global widths and padding -- */
    --site-width-wide: 96%;
    --site-width: 80%;
    --site-margin: 10vw;
    --site-margin-widescreen: 2%;
    --panel-width: 10em;
    --line-width: 100%;
}

.full_width {
    --site-margin: 2em;
    --site-margin-widescreen: 2em;
    --panel-width: 17em;
    --line-width: 55em;
    --site-width-wide: calc(100% - (var(--site-margin-widescreen) * 2));
    --site-width: calc(100% - (var(--site-margin) * 2));
}

@media (max-width: 1130px) {
    .full_width {
        --panel-width: 10em;
    }
}
    
@media (-removed-prefers-color-scheme: dark) {
    :root {
        --secondary-color: var(--bg-dark-level-1);
        --secondary-color-text: var(--text-reverse);

		--white: #ffffff;
		--lightest-gray: #f7f7f7;
		--lighter-gray: #d3d4d5;
		--light-gray: #b7b9ba;
		--gray: #9fa1a3;
		--dark-gray: #8b8e90;
		--darker-gray: #505458;
		--darkest-gray: #2b3035;
		--black: #24292e;
		
		--red: #d00000;
		--dark_red: #670D0D;
		--green: #32c281;
		--yellow: #d8ae5a;
		--tan: #d3d3c7;
		--blue: #2f83c1;
		--turquoise: #2cc3c5;

		/* -- main/foreground/text colors -- */
		--text-default: var(--lighter-gray);
		--text-reverse: var(--darkest-gray);

		--text-light: var(--light-gray);
		--text-reverse-light: var(--darker-gray);

		--link-default: var(--turquoise);
		--link-default-focus: var(--blue);
		--link-reverse: var(--darkest-gray);
		--link-reverse-focus: var(--darker-gray);

		/* -- background colors -- */
		--primary-background: var(--darkest-gray);
        --primary-background-transparent: rgba(42,48,53, .95);
        --bg-level-2-transparent: rgba(10,10,10,.8);
		--bg-level-2: var(--black);
		--bg-level-3: var(--darker-gray);
        --bg-level-4: var(--darkest-gray);
        --bg-dark-level-1: var(--lightest-gray);
        --bg-dark-level-2: var(--lighter-gray);
        --bg-dark-level-1-transparent: rgba(0,0,0,.35);
        --bg-light-contrast-green: var(--green);
		--bg-light-contrast-tan: #5e6161;
        --bg-light-contrast-yellow: var(--yellow);
        --bg-reverse-contrast-red: var(--red);
		--bg-lightest-contrast-green: #2d5c4c;
		--bg-lightest-contrast-turquoise: #2b5c60;
		--bg-lightest-contrast-blue: #2c495f;
		--bg-lightest-contrast-yellow: #5f5640;
		--bg-lightest-contrast-red: #5d2225;

		/* -- border colors -- */
		--border-lightest-contrast: var(--black);
		--border-lighter-contrast: var(--darker-gray);
		--border-light-contrast: var(--darker-gray);
		--border-darker-contrast: var(--gray);
		--border-darkest-contrast: var(--lighter-gray);
		--border-shaddow: #15181b;
        --border-shaddow-light: rgba(0,0,0,.6); 
        --border-shaddow-lightest: rgba(0,0,0,.3); 
        --border-light-contrast-green: var(--green);
        --border-light-contrast-tan: var(--tan);
        --border-light-contrast-yellow: var(--yellow);
        --border-reverse-contrast-red: var(--red);
        --border-none-by-default: none;

        --scroll-widget-color: var(--dark-gray);
	    --scrollbar-color: var(--darkest-gray);
		
		/* -- track changes colors -- */
		--change-bg-color: #034154;
		--change-solid-color: #05a4d4;
		--change-add-color: #1d6176;
		--change-delete-color: #552732;
		--change-text-color: #cdd9dd;
    }
}

/* -- Duplicate the prefers dark -- */

.dark_theme,
.unk_theme_dark
{
    --secondary-color: var(--bg-dark-level-1);
	--secondary-color-text: var(--text-reverse);

    --white: #ffffff;
    --lightest-gray: #f7f7f7;
    --lighter-gray: #d3d4d5;
    --light-gray: #b7b9ba;
    --gray: #9fa1a3;
    --dark-gray: #8b8e90;
    --darker-gray: #505458;
    --darkest-gray: #2b3035;
    --black: #24292e;
    
    --red: #d00000;
    --dark_red: #670D0D;
    --green: #32c281;
    --yellow: #d8ae5a;
    --tan: #d3d3c7;
    --blue: #2f83c1;
    --turquoise: #2cc3c5;

    /* -- main/foreground/text colors -- */
    --text-default: var(--lighter-gray);
    --text-reverse: var(--darkest-gray);

    --text-light: var(--light-gray);
    --text-reverse-light: var(--darker-gray);

    --link-default: var(--turquoise);
    --link-default-focus: var(--blue);
    --link-reverse: var(--darkest-gray);
    --link-reverse-focus: var(--darker-gray);

    /* -- background colors -- */
    --primary-background: var(--darkest-gray);
    --primary-background-transparent: rgba(42,48,53, .95);
    --bg-level-2-transparent: rgba(10,10,10,.8);
    --bg-level-2: var(--black);
    --bg-level-3: var(--darker-gray);
    --bg-level-4: var(--darkest-gray);
    --bg-dark-level-1: var(--lightest-gray);
    --bg-dark-level-2: var(--lighter-gray);
    --bg-dark-level-1-transparent: rgba(0,0,0,.35);
    --bg-light-contrast-green: var(--green);
    --bg-light-contrast-tan: #5e6161;
    --bg-light-contrast-yellow: var(--yellow);
    --bg-reverse-contrast-red: var(--red);
	--bg-lightest-contrast-green: #2d5c4c;
	--bg-lightest-contrast-turquoise: #2b5c60;
	--bg-lightest-contrast-blue: #2c495f;
	--bg-lightest-contrast-yellow: #5f5640;
	--bg-lightest-contrast-red: #5d2225;

    /* -- border colors -- */
    --border-lightest-contrast: var(--black);
    --border-lighter-contrast: var(--darker-gray);
    --border-light-contrast: var(--darker-gray);
    --border-darker-contrast: var(--gray);
    --border-darkest-contrast: var(--lighter-gray);
    --border-shaddow: #15181b;
    --border-shaddow-light: rgba(0,0,0,.6); 
    --border-shaddow-lightest: rgba(0,0,0,.3); 
    --border-light-contrast-green: var(--green);
    --border-light-contrast-tan: var(--tan);
    --border-light-contrast-yellow: var(--yellow);
    --border-reverse-contrast-red: var(--red);
    --border-none-by-default: none;
    
    --scroll-widget-color: var(--dark-gray);
    --scrollbar-color: var(--darkest-gray);

	/* -- track changes colors -- */
	--change-bg-color: #034154;
	--change-solid-color: #05a4d4;
	--change-add-color: #1d6176;
	--change-delete-color: #552732;
	--change-text-color: #cdd9dd;
}

.high_contrast_white {
    --primary-color: black !important;
    --primary-color-text: white !important;
    --secondary-color:  black !important;
    --secondary-color-text: white !important;
    
    --white: #ffffff;
    --lightest-gray: #f7f7f7;
    --lighter-gray: #d7d7d7;
    --light-gray: #cccccc;
    --gray: #888888;
    --dark-gray: #707070;
    --darker-gray: #555555;
    --darkest-gray: #333333;
    --black: #000000;
    --red: #490000;
    --orange: #442409;
    --dark_red: #490000;
    --green: #2C5C00;
    --yellow: #5C5C00;
    --tan: #646442;
	--blue: #002d4a;
	--turquoise: #003d39;

    /* -- main/foreground/text colors -- */
    --text-default: var(--black);
    --text-default-static: var(--black);
    --text-reverse: var(--white);
    --text-reverse-static: var(--white);
	
    --text-light: var(--black);
    --text-light-static: var(--black);
    --text-reverse-light: var(--white);
    --text-reverse-light-static: var(--white);
	
    --link-default: var(--darkest-gray);
    --link-default-focus: var(--black);
    --link-default-static: var(--black);
    --link-default-focus-static: var(--black);
    --link-reverse: var(--lighter-gray);
    --link-reverse-static: var(--lighter-gray);
    --link-reverse-focus: var(--white);
    --link-reverse-static-focus: var(--white);

    /* -- background colors -- */
    --primary-background: var(--white);
    --primary-background-transparent: rgba(255,255,255, .95);
    --bg-level-2-transparent: var(--white);
    --bg-level-2: var(--white);
    --bg-level-3: var(--white);
    --bg-level-4: var(--white);
    --bg-dark-level-1: var(--black);
    --bg-dark-level-2: var(--black);
    --bg-dark-level-1-transparent: rgba(0,0,0,.75);
    --bg-light-contrast-green: var(--white);
    --bg-light-contrast-tan: var(--white);
    --bg-light-contrast-yellow: var(--white);
    --bg-reverse-contrast-red: var(--black);

    /* -- border colors -- */
    --border-lightest-contrast: var(--black);
    --border-lighter-contrast: var(--black);
    --border-light-contrast: var(--black);
    --border-dark-contrast: var(--black);
    --border-darker-contrast: var(--black);
    --border-darkest-contrast: var(--black);
    --border-shaddow: var(--black);
    --border-shaddow-light: var(--black); 
    --border-shaddow-lightest: var(--black); 
    --border-light-contrast-green: var(--black);
    --border-light-contrast-tan: var(--black);
    --border-light-contrast-yellow: var(--black);
    --border-reverse-contrast-red: var(--black);
    --border-none-by-default: 1px solid var(--black);

	/* -- track changes colors -- */
	--change-bg-color: #ffffff;
	--change-solid-color: #000000;
	--change-add-color: #dfdfdf;
	--change-delete-color: #dfdfdf;
	--change-text-color: #000000;
}

.high_contrast_black {
    --primary-color: white !important;
    --primary-color-text: black !important;
    --secondary-color:  white !important;
    --secondary-color-text: black !important;

    --white: #ffffff;
    --lightest-gray: #f7f7f7;
    --lighter-gray: #d7d7d7;
    --light-gray: #cccccc;
    --gray: #888888;
    --dark-gray: #707070;
    --darker-gray: #555555;
    --darkest-gray: #333333;
    --black: #000000;
    --red: #ffd7d7;
    --orange: #f4e3d4;
    --dark_red: #ffd7d7;
    --green: #edffdc;
    --yellow: #ffffec;
    --tan: #f5f4e4;
	--blue: #d7f0ff;
	--turquoise: #d3fffb;

    /* -- main/foreground/text colors -- */
    --text-default: var(--white);
    --text-default-static: var(--white);
    --text-reverse: var(--black);
    --text-reverse-static: var(--black);
	
    --text-light: var(--white);
    --text-light-static: var(--white);
    --text-reverse-light: var(--black);
    --text-reverse-light-static: var(--black);
	
    --link-default: var(--lightest-gray);
    --link-default-focus: var(--white);
    --link-default-static: var(--white);
    --link-default-focus-static: var(--white);
    --link-reverse: var(--darker-gray);
    --link-reverse-static: var(--darker-gray);
    --link-reverse-focus: var(--black);
    --link-reverse-static-focus: var(--black);

    /* -- background colors -- */
    --primary-background: var(--black);
    --primary-background-transparent: var(--black);
    --bg-level-2-transparent: var(--black);
    --bg-level-2: var(--black);
    --bg-level-3: var(--black);
    --bg-level-4: var(--black);
    --bg-dark-level-1: var(--white);
    --bg-dark-level-2: var(--white);
    --bg-dark-level-1-transparent: rgba(255,255,255,.75);
    --bg-light-contrast-green: var(--black);
    --bg-light-contrast-tan: var(--black);
    --bg-light-contrast-yellow: var(--black);
    --bg-reverse-contrast-red: var(--white);

    /* -- border colors -- */
    --border-lightest-contrast: var(--white);
    --border-lighter-contrast: var(--white);
    --border-light-contrast: var(--white);
    --border-dark-contrast: var(--white);
    --border-darker-contrast: var(--white);
    --border-darkest-contrast: var(--white);
    --border-shaddow: var(--white);
    --border-shaddow-light: var(--white); 
    --border-shaddow-lightest: var(--white);
    --border-light-contrast-green: var(--white);
    --border-light-contrast-tan: var(--white);
    --border-light-contrast-yellow: var(--white);
    --border-reverse-contrast-red: var(--white);
    --border-none-by-default: 1px solid var(--white);
}