/*
**	index.css
*/

@import "./[html-common]/style/fullpage/dialog-appInfo.css";
/* @import "./[html-common]/style/page/header.css"; */

@import "./app/main-ui.css";
@import "./app/document-area.css";






html {
	--project-colour: mediumturquoise;

	/* mediumturquoise
	--project-colour-hsl: hsl(178, 60%, 55%);
	*/

	--transition-duration: 0.5s;
	--default-panel-colour: var(--scheme-colour);


	--scheme-colour: oklch(from var(--project-colour) 0.80 c h / alpha);
	--html-background: var(--scheme-colour);
	--accent-colour: oklch(from var(--project-colour) 0.40 c h / alpha);
	--text-colour: black;


	background-color: var(--html-background);
	accent-color: var(--accent-colour);
	color: var(--text-colour);
	color-scheme: light;



	margin:0px;
	padding:0px;

	meta[name=theme-color] { color: var(--scheme-colour); }	/* trying a little hack here - this element has no display, but it can be used to compute the colour change as it has no transition */

	body {
		margin:0px;
		padding: var(--base-length);
	}
	/* scrollbar-width: none; */

	--base-length: 12px;
	--gap: var(--base-length);
	font-size: calc(2 * var(--base-length));

	font-family: 'Noto sans', sans-serif;

	transition:
		background-color var(--transition-duration) linear;


	--border-colour: var(--accent-colour);
}




html[data-colourscheme="light"] {

	--scheme-colour: oklch(from var(--project-colour) 0.80 c h / alpha);
	--html-background: var(--scheme-colour);
	--accent-colour: oklch(from var(--project-colour) 0.40 c h / alpha);
	--text-colour: black;

	color-scheme: light;

	--background-lightness: 0.9;

}

html[data-colourscheme="dark"] {

	--scheme-colour: oklch(from var(--project-colour) 0.20 c h / alpha);
	--html-background: var(--scheme-colour);
	--accent-colour: oklch(from var(--project-colour) 0.80 c h / alpha);
	--text-colour: white;

	color-scheme: dark;

	--background-lightness: 0.2;
}





@media (prefers-color-scheme:dark) { }
@media (prefers-color-scheme:light) { }



@media (max-width: 1000px) {
	:root {
		--base-length: 18px;
	}
}