@font-face {
	font-family:'InterVariable';
	font-style:normal;
	font-weight:100 900;
	font-display:swap;
	src:url('../font/Inter/InterVariable.woff2') format('woff2');
}
@font-face {
	font-family:'InterVariable';
	font-style:italic;
	font-weight:100 900;
	font-display:swap;
	src:url('../font/Inter/InterVariable-Italic.woff2') format('woff2');
}
:root{
	font-family:'InterVariable','Noto Sans',sans-serif !important;
	font-feature-settings:'tnum','ss02';
	--color-bg:#f8f8f8;
	--color-fg:#262626;
	--color-window:#ececec;
	--color-stroke:hsl(from var(--color-window) h s calc(l - 20));

	--color-primary:	#0076d6;
	--color-secondary:	#0076d6;
	--color-tertiary:	#009ec1;

	/* Custom */
	--color-black:	#262626;
	--color-lime:	#37a42c;
	--color-white:	#f8f8f8;

	/* GNOME Palette */
	--color-blue:	#1a5fb4; /* Blue 5 */
	--color-green:	#26a269; /* Green 5 */
	--color-brown:	#63452c; /* Brown 5 */
	--color-dark:	#5e5c64; /* Dark 2 */
	--color-light:	#9a9a9a; /* Light 5 */
	--color-orange:	#c64600; /* Orange 5 */
	--color-purple:	#613583; /* Purple 5 */
	--color-red:	#a51d2d; /* Red 5 */
	--color-yellow:	#e5a50a; /* Yellow 5 */

	/* U.S. Web Design System */
	--color-uswds-blue:		#0076d6; /**/
	--color-uswds-cyan:		#009ec1;
	--color-uswds-gold:		#ffbe2e;
	--color-uswds-green:	#538200; /**/
	--color-uswds-indigo:	#676cc8;
	--color-uswds-magenta:	#d72d79;
	--color-uswds-mint:		#04c585;
	--color-uswds-orange:	#e66f0e; /**/
	--color-uswds-red:		#e52207; /**/
	--color-uswds-violet:	#8168b3;
	--color-uswds-yellow:	#fee685; /**/
}
::placeholder{
	--color-fg:rgb(from var(--color-black) r g b / 0.5);
}
body{
	>header{
		--color-bg:var(--color-primary);
		--color-fg:hsl(from var(--color-primary) h s calc(l + 20));
	}
	>nav{
		ui-menu{
			>menu{
				>li{
					&.active{
						>a{
							box-shadow:inset 0px 2px var(--color-tertiary);
							--color-bg:linear-gradient(
								hsl(from var(--color-tertiary) h s calc(l + 50)),
								hsl(from var(--color-window) h s calc(l - 5))
							);
						}
					}
					>a{
						&:hover{
							--color-bg:hsl(from var(--color-window) h s calc(l + 5));
							--color-fg:hsl(from var(--color-window) h s calc(l - 70)) !important;
						}
					}
					--color-bg:var(--color-window);
				}
			}
		}
		--color-bg:hsl(from var(--color-window) h s calc(l - 15));
		--color-fg:var(--color-fb);
	}
	>aside{
		>ui-menu{
			>ui-header{
				--color-bg:transparent;
				--color-fg:hsl(from var(--color-window) h s calc(l - 50));
			}
			>menu{
				>li{
					&.active{
						>a{
							box-shadow:inset 2px 0px var(--color-tertiary);
							--color-bg:linear-gradient(
								to right,
								hsl(from var(--color-tertiary) h s calc(l + 50)),
								hsl(from var(--color-window) h s calc(l - 5))
							);
						}
					}
					>a{
						&:hover{
							--color-bg:hsl(from var(--color-window) h s calc(l + 1));
							--color-fg:hsl(from var(--color-window) h s calc(l - 70)) !important;
						}
					}
				}
			}
		}
		--color-bg:hsl(from var(--color-window) h s calc(l - 5));
	}
	>main{
		ui-controls{
			>table-pages{
				--color-bg:hsl(from var(--color-window) h s calc(l - 5));
				--color-fg:#232627;
			}
			--color-bg:hsl(from var(--color-window) h s calc(l - 15));
		}
		ui-menu{
			>menu{
				>li{
					&.active{
						>a{
							--color-bg:hsl(from var(--color-window) h s calc(l + 50)) !important;
							--color-fg:hsl(from var(--color-tertiary) h s calc(l - 10)) !important;
						}
					}
					>a{
						&:hover{
							--color-bg:hsl(from var(--color-window) h s calc(l + 5));
							--color-fg:hsl(from var(--color-window) h s calc(l - 70)) !important;
						}
						--color-bg:var(--color-window);
					}
				}
			}
		}
		--color-bg:var(--color-white);
	}
	>footer{
		--color-bg:var(--color-window);
		--color-fg:hsl(from var(--color-bg) h s calc(l - 50));
	}
	>main ui-table ui-controls ui-menu a,
	a.button,
	button,
	input::file-selector-button,
	input[type=button],
	input[type=reset]
	input[type=submit]{
		--color-bg:linear-gradient(
			hsl(from var(--color-white) h s calc(l - 5)),
			hsl(from var(--color-white) h s calc(l - 15))
		);
		--color-fg:hsl(from var(--color-window) h s calc(l - 80));
		--color-stroke:hsl(from var(--color-window) h s calc(l - 30));
		&:hover{
			--color-bg:linear-gradient(
				hsl(from var(--color-white) h s calc(l - 5)),
				var(--color-white)
			);
			--color-stroke: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]{
		--color-bg:rgb(from var(--color-white) r g b /0.5);
		--color-stroke:rgb(from var(--color-black) r g b /0.5);
		--color-fg:rgb(from var(--color-black) r g b /0.5);
	}
	input,
	input-multiple,
	textarea{
		&.duplicate{
			--color-bg:hsl(from var(--color-yellow) h s calc(l + 50));
			--color-fg:hsl(from var(--color-yellow) h s calc(l - 20));
		}
		&:read-only{
			--color-bg:rgb(from var(--color-bg) r g b / 0.5);
			--color-stroke:rgb(from var(--color-stroke) r g b / 0.5);
			--color-fg:rgb(from var(--color-fg) r g b / 0.5);
		}
		--color-bg:hsl(from var(--color-window) h s calc(l + 20));
		--color-fg:hsl(from var(--color-window) h s calc(l - 80));
	}
	select{
		&:has(>option[value=""]:checked){
			--color-fg:rgb(from var(--color-black) r g b / 0.5);
		}
		>option{
			&:nth-child(even){
				--color-bg:hsl(from var(--color-window) h s calc(l + 4));
			}
			&[value=""]{
				--color-fg:rgb(from var(--color-black) r g b / 0.5);
			}
			--color-fg:hsl(from var(--color-window) h s calc(l - 80));
		}
		--color-bg:hsl(from var(--color-window) h s calc(l + 20));
		--color-fg:hsl(from var(--color-window) h s calc(l - 80));
	}
	ui-accordion,
	ui-breadcrumb,
	ui-form,
	ui-message{
		--color-bg:var(--color-window);
	}
	ui-accordion{
		article{
			--color-bg:var(--color-white);
		}
		summary{
			&::after{
				--color-fg:var(--color-secondary);
			}
		}
	}
	ui-breadcrumb{
		>menu{
			>li{
				&.active{
					--color-bg:linear-gradient(
						to left,
						hsl(from var(--color-tertiary) h s calc(l + 50)),
						hsl(from var(--color-window) h s calc(l - 5))
					);
					box-shadow:inset -2px 0px var(--color-tertiary);
				}
				--color-bg:linear-gradient(
					var(--color-window),
					hsl(from var(--color-window) h s calc(l - 10))
				);
			}
			--color-bg:hsl(from var(--color-window) h s calc(l - 25));
		}
	}
	ui-form{
		dialog{
			>menu{
				>li{
					&:nth-child(even){
						--color-bg:hsl(from var(--color-window) h s calc(l + 0));
					}
					--color-bg:hsl(from var(--color-window) h s calc(l + 5));
				}
			}
		}
		input-json-array,
		input-json-object{
			>header{
				--color-bg:hsl(from var(--color-window) h s calc(l - 5));
			}
		}
		input-multiple{
			>i{
				--color-bg:linear-gradient(
					hsl(from var(--color-white) h s calc(l - 5)),
					hsl(from var(--color-white) h s calc(l - 15))
				);
				--color-fg:hsl(from var(--color-window) h s calc(l - 80));
				--color-stroke:hsl(from var(--color-window) h s calc(l - 30));
				&:hover{
					--color-bg:linear-gradient(
						hsl(from var(--color-white) h s calc(l - 5)),
						var(--color-white)
					);
					--color-stroke:hsl(from var(--color-secondary) h s calc(l - 10));
				}
			}
			>multiple-active{
				>span{
					--color-fg:rgb(from var(--color-black) r g b / 0.5);
				}
				--color-stroke:hsl(from var(--color-window) h s calc(l - 20));
				--color-bg:hsl(from var(--color-window) h s calc(l + 20));
				--color-fg:hsl(from var(--color-window) h s calc(l - 80));
			}
		}
	}
	ui-table{
		>table{
			>thead{
				>tr{
					a{
						&:hover{
							--color-bg:hsl(from var(--color-secondary) h s calc(l + 35));
							--color-fg:hsl(from var(--color-secondary) h s calc(l - 25)) !important;
							--color-stroke:hsl(from var(--color-secondary) h s calc(l - 25));
						}
						--color-fg:hsl(from var(--color-window) h s calc(l - 50));
					}
					th{
						&.active{
							a{
								&:hover{
									box-shadow:inset 0px 1px var(--color-stroke);
								}
								box-shadow:inset 0px 1px var(--color-tertiary);
							}
						}
					}
					--color-bg:var(--color-window);
					--color-fg:hsl(from var(--color-window) h s calc(l - 50));
				}
			}
			>tbody{
				>tr{
					&:hover{
						--color-stroke:hsl(from var(--color-tertiary) h s calc(l - 5));
					}
					&:nth-child(even){
						--color-bg:hsl(from var(--color-window) h s calc(l + 0));
					}
					>td{
						&:has(ui-toggle.error){
							--color-bg:hsl(from var(--color-red) h s calc(l + 30) / 0.75);
							--color-fg:hsl(from var(--color-red) h s calc(l - 20));
						}
						&:has(ui-toggle.false){
							--color-bg:hsl(from var(--color-light) h s calc(l + 30) / 0.75);
							--color-fg:hsl(from var(--color-light) h s calc(l - 20));
						}
						&:has(ui-toggle.true){
							--color-bg:hsl(from var(--color-lime) h s calc(l + 50) / 0.75);
							--color-fg:hsl(from var(--color-lime) h s calc(l - 20));
						}
						--color-stroke:none;
						--color-bg:transparent;
						--color-fg:inherit;
					}
					>th{
						--color-bg:var(--color-window);
						--color-fg:hsl(from var(--color-window) h s calc(l - 50));
					}
				}
			}
			>tfoot{
				>tr{
					--color-bg:var(--color-white);
					>td{
						&:has(>data:empty){
							--color-bg:var(--color-window);;
						}
					}
				}
			}
			--color-bg:hsl(from var(--color-window) h s calc(l + 5));
		}
	}
}
ui-header{
	>ui-controls{
		--color-bg:transparent !important;
	}
	--color-bg:linear-gradient(
		var(--color-secondary),
		hsl(from var(--color-secondary) h s calc(l - 5))
	);
	--color-stroke:hsl(from var(--color-secondary) h s calc(l - 10));
	--color-fg:hsl(from var(--color-secondary) h s calc(l + 50));
}
.active,
.active a{
	--color-bg:linear-gradient(
		hsl(from var(--color-tertiary) h s calc(l + 50)),
		var(--color-window)
	);
	--color-fg:hsl(from var(--color-tertiary) h s calc(l - 10)) !important;
}
/* Colour */
.black	{--color-base:var(--color-black);}
.blue	{--color-base:var(--color-blue);}
.brown	{--color-base:var(--color-brown);}
.cyan	{--color-base:var(--color-cyan);}
.gold	{--color-base:var(--color-gold);}
.green	{--color-base:var(--color-lime);} /* overide to lime */
.grey	{--color-base:var(--color-light);}
.indigo	{--color-base:var(--color-indigo);}
.lime	{--color-base:var(--color-lime);}
.magenta{--color-base:var(--color-magenta);}
.mint	{--color-base:var(--color-mint);}
.orange	{--color-base:var(--color-orange);}
.purple	{--color-base:var(--color-purple);}
.red	{--color-base:var(--color-red);}
.violet	{--color-base:var(--color-violet);}
.white	{--color-base:var(--color-white);}
.yellow	{--color-base:var(--color-yellow);}
/* Status */
.alert	{--color-base:hsl(from var(--color-uswds-orange)	h 80% 42%); --content-icon:'\f017e';}
.error	{--color-base:hsl(from var(--color-uswds-red)		h 72% 42%); --content-icon:'\f0187';}
.help	{--color-base:hsl(from var(--color-uswds-yellow)	h 80% 45%); --content-icon:'\f15af';}
.info	{--color-base:hsl(from var(--color-uswds-blue)		h 72% 42%); --content-icon:'\f0185';}
.pass	{--color-base:hsl(from var(--color-uswds-green)		h 60% 40%); --content-icon:'\f0180';}
.query	{--color-base:hsl(from var(--color-uswds-violet)	h 40% 42%); --content-icon:'\f0186';}
/*  */
.alert,.black,.blue,.brown,.cyan,
.error,.gold,.green,.grey,.help,
.indigo,.info,.magenta,.mint,.orange,
.pass,.purple,.query,.red,.violet,
.white,.yellow{
	--color-bg:hsl(from var(--color-base) h s calc(l + 50)) !important;
	--color-fg:hsl(from var(--color-base) h s calc(l - 20)) !important;
	--color-stroke:hsl(from var(--color-fg) h s calc(l + 20));
}