:root {
	/* base colors */

	/* black / gray / lightgray */
	--wss-gray-0: #262627;
	--wss-gray-1: #3C3C3B;
	--wss-gray-2: #525251;
	--wss-gray-3: #686867;
	--wss-gray-4: #7E7E7D;
	--wss-gray-5: #939493;

	--wss-lightgray-1: #A9AAA9;
	--wss-lightgray-2: #BEC0BF;
	--wss-lightgray-3: #D4D6D5;
	--wss-lightgray-4: #DFE1E0;
	--wss-lightgray-5: #E9EBEB;
	--wss-lightgray-6: #f0f0f0;

	--wss-black: var(--wss-gray-0);
	--wss-gray: var(--wss-lightgray-1);
	--wss-lightgray: var(--wss-lightgray-5);
	--wss-darkgray: var(--wss-lightgray-1);
	--wss-white: #F8F8FF;

	/* blue / lightblue / greenblue */
	--wss-blue-1: #314A5A;
	--wss-blue-2: #2C5169;
	--wss-blue-3: #265778;
	--wss-blue-4: #4F7798;
	--wss-blue-5: #6487A8;
	--wss-blue-6: #7896B8;
	--wss-blue-7: #96AFC3;
	--wss-blue-8: #B3C8CE;
	--wss-blue-9: #CFE0EA;

	--wss-lightblue-1: #5297C4ff;
	--wss-lightblue-2: #5297C4dd;
	--wss-lightblue-3: #5297C4bb;
	--wss-lightblue-4: #5297C499;
	--wss-lightblue-5: #5297C477;
	--wss-lightblue-6: #5297C455;
	--wss-lightblue-7: #5297C433;
	--wss-lightblue-8: #5297C422;
	--wss-lightblue-9: #5297C411;

	--wss-blue: var(--wss-blue-3);
	--wss-lightblue: var(--wss-lightblue-4);

	/* green / greenblue */
	--wss-greenblue-1: #37574F;
	--wss-greenblue-2: #317263;
	--wss-greenblue-3: #2B8D77;
	--wss-greenblue-4: #25A78A;
	--wss-greenblue-5: #3EB097;
	--wss-greenblue-6: #56B8A3;
	--wss-greenblue-7: #87C9BB;
	--wss-greenblue-8: #B8DAD3;

	--wss-green-1: #3E5F38;
	--wss-green-2: #3F8135;
	--wss-green-3: #40A332;
	--wss-green-4: #41B430;
	--wss-green-5: #41C52E;
	--wss-green-6: #56CA46;
	--wss-green-7: #6BCF5E;
	--wss-green-8: #AADDA5;

	--wss-green: var(--wss-green-4);
	--wss-darkgreen: var(--wss-green-2);
	--wss-greenblue: var(--wss-greenblue-4);

	/* red / purple */
	--wss-purple-1: #702980;
	--wss-purple-2: #7D2591;
	--wss-purple-3: #8A20A2;
	--wss-purple-4: #A416C4;
	--wss-purple-5: #B64CCE;
	--wss-purple-6: #BF67D3;
	--wss-purple-7: #C781D8;
	--wss-purple-8: #D8B6E2;
	--wss-purple-9: #EAD8F0AA;

	--wss-red-1: #4F1F1F;
	--wss-red-2: #842929;
	--wss-red-3: #D12A2A;
	--wss-red-4: #F32727;
	--wss-red-5: #F33D3D;
	--wss-red-6: #F35252;
	--wss-red-7: #F17272;
	--wss-red-8: #EE9292;

	--wss-purple: var(--wss-purple-4);
	--wss-red: var(--wss-red-4);
	--wss-darkred: var(--wss-red-2);

	/* orange / yellow */
	--wss-orange-1: #926A41;
	--wss-orange-2: #BD8144;
	--wss-orange-3: #D28C45;
	--wss-orange-4: #E79746;
	--wss-orange-5: #E89D51;
	--wss-orange-6: #E8A25B;
	--wss-orange-7: #E8AC70;
	--wss-orange-8: #E8C199;

	--wss-yellow-1: #8C8237;
	--wss-yellow-2: #C8B734;
	--wss-yellow-3: #D2C034;
	--wss-yellow-4: #DCC833;
	--wss-yellow-5: #DECD4A;
	--wss-yellow-6: #E0D161;
	--wss-yellow-7: #E2D678;
	--wss-yellow-8: #E3DA8F;
	--wss-yellow-9: #f4ecab;

	--wss-orange: var(--wss-orange-4);
	--wss-yellow: var(--wss-yellow-4);

	/* fix */
	--ws_bkgrnd_ro: #f5f5f5;
	--ws_border_ro: #d5d5d5;

	--wss-shadow: 1px 1px 6px 1px var(--wss-lightgray-2);
	--wss-text-shadow: 0 0 4px var(--wss-gray-5);
	--wss-shadow-center: 0 0 6px 1px var(--wss-lightgray-4);
	--wss-shadow-right: 4px 4px 6px 1px var(--wss-lightgray-4);
	--wss-shadow-left: -4px 4px 6px 1px var(--wss-lightgray-4);
}

/* base color styles */
.wss-red { color: var(--wss-red); }
.wss-darkred { color: var(--wss-darkred); }
.wss-green { color: var(--wss-green); }
.wss-darkgreen { color: var(--wss-darkgreen); }
.wss-green-3 { color: var(--wss-green-3); }
.wss-orange { color: var(--wss-orange); }
.wss-yellow { color: var(--wss-yellow); }
.wss-blue { color: var(--wss-blue); }
.wss-lightblue { color: var(--wss-lightblue); }
.wss-gray { color: var(--wss-gray); }
.wss-lightgray { color: var(--wss-lightgray); }