@import url(main.css);

:root {
	--step: 1.2;
	--font-size: 18px;
	--line-height: 1.8;
	--small: 0.6em;
	--large: 1.4em;
	--transition: 0.6s;
	--header-offset: 100px;
	--gap: 20px;
	--radius: 2em;
	--radius-inner: 1em;
	--width-limit: 1000px;
	--section-space: 60px;
	--margin: 1.8em;
	--padding: 20px;
	--input-width: 260px;
	--brightness: 1.1;
	--outline: 1px;
	--trigger-size: 50px;
	--trigger-bar: 3px;


	--color-light-glass:rgba(255, 254, 254,0.8);
	--color-dark-glass:rgba(38, 32, 32,0.8);

	--color-white: rgb(255, 254, 254);
	--color-blue: rgb(35, 137, 248);
	--color-red: rgb(231, 63, 63);
	--color-green: #008a7c;
	--color-yellow: rgb(248, 245, 46);
	--color-orange: rgb(252, 169, 16);
	--color-gray: rgb(156, 147, 147);
	--color-lightgray: rgb(239, 233, 233);
	--color-black: rgb(38, 32, 32);
}

@media (prefers-color-scheme: light){
	:root{
		--color-body: var(--color-white);
		--color-text: var(--color-black);
		--color-border: var(--color-black);
		--color-table: none;
		--color-table-odd: none;

		--color-agree-bg: var(--color-green);
		--color-agree-fr: var(--color-white);

		--color-disagree-bg: var(--color-red);
		--color-disagree-fr: var(--color-white);

		--color-cancel-bg: var(--color-lightgray);
		--color-cancel-fr: var(--color-black);

		--color-trigger-bg: var(--color-dark-glass);
		--color-trigger-fr: var(--color-white);

		--color-outline: var(--color-lightgray);
		--color-outline-focus: var(--color-blue);
		--color-outline-text: var(--color-black);
		--color-outline-focus-text: var(--color-white);
		--color-link: var(--color-blue);
		--color-hover: var(--color-red);
		--color-form: var(--color-white);
	}
}

@media (prefers-color-scheme: dark){
	:root{
		--color-body: var(--color-gray);
		--color-text: var(--color-white);
		--color-border: var(--color-white);
		--color-table: none;
		--color-table-odd: none;

		--color-agree-bg: var(--color-green);
		--color-agree-fr: var(--color-white);

		--color-disagree-bg: var(--color-red);
		--color-disagree-fr: var(--color-white);

		--color-cancel-bg: var(--color-lightgray);
		--color-cancel-fr: var(--color-black);

		--color-trigger-bg: var(--color-white);
		--color-trigger-fr: var(--color-dark-glass);

		--color-outline: var(--color-lightgray);
		--color-outline-focus: var(--color-yellow);
		--color-outline-text: var(--color-black);
		--color-outline-focus-text: var(--color-black);
		--color-link: var(--color-yellow);
		--color-hover: var(--color-red);
		--color-form: var(--color-black);
	}
}

@media (max-width : 520px) {
	:root {
		--section-space: 40px;
	}
}