@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');

@import "../../style/reset.css";
@import "./component/layout.css";
@import "./component/typography.css";
@import "./component/dialog.css";
@import "./component/icon.css";
@import "./component/button.css";
@import "./component/toaster.css";
@import "./component/panel.css";
@import "./component/menu.css";
@import "./component/form.css";
@import "./component/table.css";
@import "./component/rich-editor.css";
@import "./component/page-header.css";
@import "./component/media-library.css";
@import "./component/notice.css";
@import "./component/tutorial.css";
@import "./component/menubar.css";
@import "./component/hide-on-device.css";

:root {

	--theme-light-body-bg: #DDD;
	--theme-light-body-fg: #111;

	--theme-light-panel-bg: #F4F4F4;

	--theme-light-button-bg: #F8F8F8;

	--theme-light-input-bg: #FFF;
	--theme-light-input-fg: #111;

	--theme-light-toaster-progress-bg: #EFEFEF;

	--theme-light-color-shadow: #0004;
	--theme-light-color-highlight: #FFF;

	--theme-dark-body-bg: #000;
	--theme-dark-body-fg: #AAA;

	--theme-dark-panel-bg: #111;

	--theme-dark-button-bg: #070707;

	--theme-dark-input-bg: #000;
	--theme-dark-input-fg: #DDD;

	--theme-dark-toaster-progress-bg: #000;

	--theme-dark-color-shadow: #000A;
	--theme-dark-color-highlight: #000;

	/*
	--------------------------------------------------------------------------------------------------------------------
	*/

	--body-bg: var(--theme-light-body-bg);
	--body-fg: var(--theme-light-body-fg);

	--panel-bg: var(--theme-light-panel-bg);
	--panel-fg: var(--body-fg);
	--panel-border: 1px solid var(--color-shadow);
	--panel-box-shadow: 0 0 var(--space-n) var(--color-shadow);

	--button-bg: var(--theme-light-button-bg);
	--button-fg: var(--panel-fg);

	--input-bg: var(--theme-light-input-bg);
	--input-fg: var(--theme-light-input-fg);
	--input-border: 1px solid var(--color-shadow);
	--input-box-shadow:	inset var(--panel-box-shadow);
	--input-size: 2.5rem;

	--notice-fg: #111;

	--toaster-progress-bg: var(--theme-light-toaster-progress-bg);

	--focus-outline: 4px solid var(--color-info);

	--color-shadow: var(--theme-light-color-shadow);
	--color-highlight: var(--theme-light-color-highlight);

	--color-info-text: #FFF;
	--color-info: #228FEE;
	--color-good: #41DA60;
	--color-warn: #FFB921;
	--color-bad: #FF3554;

	--font-family: 'Dosis', sans-serif;
	--line-height: 1.5;

	--font-size-s: .85rem;
	--font-size-m: 1rem;
	--font-size-3: 1.25rem;
	--font-size-2: 1.5rem;
	--font-size-1: 1.75rem;
	--font-size-x: 4rem;

	--anim-duration-s: .25s;
	--anim-duration-m: .5s;
	--anim-duration-l: 1s;
	--anim-duration-x: 2s;

	--space-n: .25rem;
	--space-s: .5rem;
	--space-m: 1rem;
	--space-l: 2rem;
}

@media screen and (prefers-color-scheme: dark) {

	:root {

		--body-bg: var(--theme-dark-body-bg);
		--body-fg: var(--theme-dark-body-fg);

		--panel-bg: var(--theme-dark-panel-bg);

		--button-bg: var(--theme-dark-button-bg);

		--input-bg: var(--theme-dark-input-bg);
		--input-fg: var(--theme-dark-input-fg);

		--toaster-progress-bg: var(--theme-dark-toaster-progress-bg);

		--color-shadow: var(--theme-dark-color-shadow);
		--color-highlight: var(--theme-dark-color-highlight);
	}

	.icon { filter: invert(); }

	.fancy-checkbox + label::before,
	.fancy-checkbox + label::after { filter: invert(); }
}

/*
------------------------------------------------------------------------------------------------------------------------
*/

html[data-theme="light"] {

	--body-bg: var(--theme-light-body-bg);
	--body-fg: var(--theme-light-body-fg);

	--panel-bg: var(--theme-light-panel-bg);

	--button-bg: var(--theme-light-button-bg);

	--input-bg: var(--theme-light-input-bg);
	--input-fg: var(--theme-light-input-fg);

	--toaster-progress-bg: var(--theme-light-toaster-progress-bg);

	--color-shadow: var(--theme-light-color-shadow);
	--color-highlight: var(--theme-light-color-highlight);
}

html[data-theme="light"] .icon { filter: none; }

html[data-theme="light"] .fancy-checkbox + label::before,
html[data-theme="light"] .fancy-checkbox + label::after { filter: none; }

html[data-theme="dark"] {

	--body-bg: var(--theme-dark-body-bg);
	--body-fg: var(--theme-dark-body-fg);

	--panel-bg: var(--theme-dark-panel-bg);

	--button-bg: var(--theme-dark-button-bg);

	--input-bg: var(--theme-dark-input-bg);
	--input-fg: var(--theme-dark-input-fg);

	--toaster-progress-bg: var(--theme-dark-toaster-progress-bg);

	--color-shadow: var(--theme-dark-color-shadow);
	--color-highlight: var(--theme-dark-color-highlight);
}

html[data-theme="dark"] .icon { filter: invert(); }

html[data-theme="dark"] .fancy-checkbox + label::before,
html[data-theme="dark"] .fancy-checkbox + label::after { filter: invert(); }

/*
------------------------------------------------------------------------------------------------------------------------
*/

body {

	color: var(--body-fg);
	background: var(--body-bg);
}