/*
**	index.css
*/


@import "./[html-common]/style/fullpage/dialog-appInfo.css";
@import "./[html-common]/style/fullpage/ui-panel.css";
@import "./[html-common]/style/fullpage/panel-group.css";
@import "./app/user-interface.css";
@import "./app/screensaver-output.css";
@import "./app/animation.css";



:root {
	--project-colour: midnightblue;
	--transition-time-page: 1s;
	--transition-time-ui: 0.5s;
}



html {
	margin:0px;
	padding:0px;

	scrollbar-width: none;

	font-family: sans-serif;
	font-size: 14px;

	body {
		margin:0px;
		padding:0px;

		a {
			color: var(--accent-colour);
			text-decoration: none;
			&:hover { text-decoration: underline; }
		}

		output > svg {
			display:block;	/*  fix for the extra pixel problem */
		}
	}
}/* html */



html {

	--scheme-colour: #0a0a0a;
	--html-background: var(--scheme-colour);
	--accent-colour: hsl(from var(--project-colour) h s 85 );

	--default-panel-colour: var(--html-background);
	--scheme-colour: var(--html-background);

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

	transition:
		background-color var(--transition-time-page) linear;
		/* color-scheme var(--transition-time-page) linear allow-discrete; */	/* this causes bugs in chromium */


	body {
		color: lab( from var(--scheme-colour) calc(sign(l - 70) * -100) 0 0 / 1);
		accent-color: var(--accent-colour);

		transition:
			color var(--transition-time-page) linear,
			accent-color var(--transition-time-page) linear;
	}
}



html[data-colourscheme=light] {
	color-scheme: light;
	--accent-colour: oklch(from var(--scheme-colour) 0.6 c h );
}

html[data-colourscheme=dark] {
	color-scheme: dark;
	--accent-colour: oklch(from var(--scheme-colour) 0.8 c h );
}