/*@property --bg{
	syntax:'<color>';
	inherits:false;
	initial-value:#232627;
}
@property --fg{
	syntax:'<color>';
	inherits:false;
	initial-value:#fcfcfc;
}
@property --border{
	syntax:'<color>';
	inherits:false;
	initial-value:#444;
}*/
@font-face{
	font-family:'Inter';
	font-style:normal;
	font-weight:normal;
	font-display:swap;
	src:url('../font/inter-regular.woff2') format('woff2');
}
@font-face{
	font-family:'Inter';
	font-style:italic;
	font-weight:normal;
	font-display:swap;
	src:url('../font/inter-italic.woff2') format('woff2');
}
@font-face{
	font-family:'Inter';
	font-style:normal;
	font-weight:bold;
	font-display:swap;
	src:url('../font/inter-bold.woff2') format('woff2');
}
@font-face{
	font-family:'Inter';
	font-style:italic;
	font-weight:bold;
	font-display:swap;
	src: url('../font/inter-bolditalic.woff2') format('woff2');
}
:root{
	font-family:'Inter','Noto Sans',sans-serif !important;
	font-feature-settings:'tnum','ss02';
	--border:#444;
	--bg:#fcfcfc;
	--fg:#232627;
}
body{
/*
	--base-color:#f00;
	--primary-color:	hsl(from var(--base-color) h s calc(l+10));
	--secondary-color:	hsl(from var(--base-color) h s calc(l+20));
	--base-darker:		hsl(from var(--base-color) h s calc(l-5));
	--base-black:		hsl(from var(--base-color) h s calc(l-10));
*/
	--color-bg:#f8f8f8;
	--color-fg:#262626;
	--color-window:#ececec;
	--color-button:hsl(from var(--color-window) h s calc(l - 20));
	--color-primary:#1a5fb4;
	--color-secondary:#26a269;
	--color-tertiary:#613583;

	--bg:#f6f8fc;
	--border:#bac0c8;
	--fg:#232627;
	>header{
		--bg:var(--color-primary);
		--fg:hsl(from var(--color-primary) h s calc(l + 20));
	}
	>nav{
		--bg:hsl(from var(--color-window) h s calc(l - 10));;
		--fg:#000;
		>nav.menu{
			>menu{
				>li{
					>a{
						&.active{
							--bg:#f3f4f6 !important;
							---border:hsl(from var(--color-secondary) h s calc(l - 10));
							--fg:#000 !important;
						}
						&:hover{
							--border:inherit !important;
						}
					}
				}
			}
		}
	}
	>main{
		--bg:#fff;
		nav.menu{
			--bg:#bac0c8;
			>menu{
				>li{
					>a{
						--bg:#bababb;
						&.active{
							--bg:#e5e7eb !important;
							--fg:#000 !important;
						}
					}
				}
			}
		}
		nav.breadcrumb{
			--bg:#e5e7eb;
		}
		nav.controls{
			--bg:hsl(from var(--color-window) h s calc(l - 5));
		}
	}
	>aside{
		--bg:hsl(from var(--color-window) h s calc(l - 5));
		>nav.menu{
			>header{
				--bg:transparent;
				--fg:hsl(from var(--color-window) h s calc(l - 50));
				font-weight:normal;
			}
		}
	}
	>footer{
		--bg:var(--color-bg);
		--fg:hsl(from var(--color-bg) h s calc(l - 50));
	}
}
body>main div.resultset nav.controls nav.menu a,
a.button,
button,
input::file-selector-button,
input[type=button],
input[type=reset]
input[type=submit]{
	--bg:hsl(from var(--color-window) h s calc(l + 5));
	--border:hsl(from var(--color-window) h s calc(l - 20));
	--fg:hsl(from var(--color-window) h s calc(l - 80));
	&:hover{
		--bg:hsl(from var(--color-window) h s calc(l - 0));
		--border:hsl(from var(--color-secondary) h s calc(l - 10));
	}
}
button[disabled],
input[disabled]::file-selector-button,
input[disabled][type=button],
input[disabled][type=reset],
input[disabled][type=submit]{
	--bg:rgba(200,200,200,0.5);
	--border:rgba(100,100,100,0.5);
	--fg:rgba(0,0,0,0.35);
}
input,
input-multiple,
textarea{
	--bg:hsl(from var(--color-window) h s calc(l + 20));
	--border:hsl(from var(--color-window) h s calc(l - 20));
	--fg:hsl(from var(--color-window) h s calc(l - 80));
}
input,
textarea{
	&.duplicate{
		--bg:#f2eabe;
		--fg:hsl(from var(--color-window) h s calc(l - 80));
	}
	&:read-only{
		--bg:rgba(255,255,255,0.5);
		--border:rgba(0,0,0,0.75);
		--fg:rgba(0,0,0,0.5);
	}
}
nav.menu a:hover{
	--bg:hsl(from var(--color-secondary) h s calc(l + 40) / 50%);
	--border:hsl(from var(--color-secondary) h s calc(l - 10));
	--fg:hsl(from var(--color-secondary) h s calc(l - 20));
}
nav-pages{
	--bg:hsl(from var(--color-window) h s calc(l - 5));
	--border:hsl(from var(--color-window) h s calc(l - 20));
	--fg:#232627;
}
.header{
	--bg:#dbdcdd;
	--border:hsl(from var(--color-window) h s calc(l - 20));
	--fg:#232627;
}
div.fieldset{
	--bg:var(--color-window);
}
div.resultset>table{
	>tbody>tr{
		---bg:rgba(242,242,242,0.75);
		--border:hsl(from var(--color-window) h s calc(l - 20));
		>td{
			--border:none;
 			--bg:transparent;
 			--fg:inherit;
		}
		>th{
			--bg:var(--color-window);
			--border:hsl(from var(--color-window) h s calc(l - 20));
			--fg:hsl(from var(--color-window) h s calc(l - 50));
		}
		&:hover{
			--border:hsl(from var(--color-secondary) h s calc(l - 5));
		}
	}
	>thead>tr{
		--bg:var(--color-window);
		--border:hsl(from var(--color-window) h s calc(l - 20));
		--fg:hsl(from var(--color-window) h s calc(l - 50));
		a{
			--fg:hsl(from var(--color-window) h s calc(l - 50));
		}
	}
	>tfoot>tr{
		--bg:var(--color-window);
		>td{
			---bg:hsl(from var(--color-window) h s calc(l - 5));
		}
	}
}
.title{
	--bg:var(--color-primary);
	--border:hsl(from var(--color-primary) h s calc(l - 10));
	--fg:hsl(from var(--color-primary) h s calc(l + 50));
}
.active,.active a{
	--bg:hsl(from var(--color-secondary) h s calc(l + 40));
	--fg:hsl(from var(--color-secondary) h s calc(l - 20));
}
:placeholder{--fg:rgba(0,0,0,0.35);}
.blue{
	--bg:rgba(168,221,224,0.5) !important;	/* #a8dde0 */
	--fg:#007880 !important;
}
.grey{
	--bg:rgba(221,221,221,0.5) !important;	/* #ddd */
	--fg:#323232 !important;
}
.green{
	--bg:rgba(216,232,194,0.5) !important;	/* #d8e8c2 */
	--fg:#00892c !important;
}
.yellow{
	--bg:rgba(255,246,200,0.5) !important;	/* #fff6c8 */
	--fg:#997500 !important;
}
.orange{
	--bg:rgba(255,217,176,0.5) !important;	/* #ffd9b0 */
	--fg:#cf4913 !important;
}
.red{
	--bg:rgba(249,204,202,0.5) !important;	/* #f9ccca */
	--fg:#8c0000 !important;
}
.purple{
	--bg:rgba(195,180,218,0.5) !important;	/* #c3b4da */
	--fg:#34176e !important;
}
.alert{
	---bg:#fff6c8;
	--bg:#fffbe6;
	--border:#f3c300;
	--content:'\f017e';
	--icon:#fa0;
}
.error{
	---bg:#ffbfbf;
	--bg:#ffe6e6;
	--fg:#900;
	--border:#ff8080;
	--content:'\f0187';
	--icon:#8c0000;
}
.info{
	---bg:#bfd9ff;
	--bg:#e6f0ff;
	--border:#80b3ff;
	--content:'\f0185';
	--icon:#00438a;
}
.pass{
	---bg:#c7dfae;
	--bg:#e9f5d9;
	--border:#77b753;
	--content:'\f0180';
	--icon:#37a42c;
}
.query{
	---bg:#c3b4da;
	--bg:#ebe6f3;
	--border:#8168b5;
	--content:'\f0186';
	--icon:#644a9b;
}