@import "../services/css/v4.2/basic.css";
@import "../services/css/v4.2/grid.css";
@import "../services/css/v4.2/button.css";
@import "../services/css/v4.2/table.css";
@import "../services/css/v4.2/form.css";
@import "../services/css/v4.2/form_file.css";
@import "../services/css/v4.2/header.css";
@import "../services/css/v4.2/nav.css";
@import "../services/css/v4.2/paging.css";

@import url("main.css");
@import url("header.css");
@import url("footer.css");
@import url("nav.css");

:root {
    --width-limit: 1400px;
	--section-space: 60px;
	--margin: 1.8em;
	--padding: 20px;
	--input-width: 260px;

	--radius: 0.6em;
	--radius-inner: 0.3em;

	--font-size: 18px;
	--step: 1.2;
	--line-height: 1.6;
	--transition: 0.2s;
	--small: 0.6em;
	--large: 1.4em;

	--brightness: 1.1;
	--outline: 1px;

	--trigger-size: 50px;
	--trigger-bar: 4px;

	--gap: calc( var(--margin) * var(--step) );
	--header-offset: 80px;

	--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: rgb(46, 163, 105);
	--color-yellow: rgb(248, 245, 46);
	--color-orange: rgb(252, 169, 16);
	--color-gray: rgb(152, 156, 161);
	--color-lightgray: rgb(230, 233, 239);
	--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: var(--color-white);
		--color-table-odd: var(--color-lightgray);

		--color-agree-bg: var(--color-blue);
		--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-gray);
		--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-black);
		--color-text: var(--color-white);
		--color-border: var(--color-white);
		--color-table: var(--color-black);
		--color-table-odd: var(--color-gray);

		--color-agree-bg: var(--color-blue);
		--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);
	}
}