/*Shared tokens and base styles for the host app and the singer page*/

/*Self-hosted fonts (SIL Open Font License, see fonts/OFL.txt)*/
@font-face {
	font-family: "Fraunces";
	src: url("fonts/Fraunces.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("fonts/SourceSans3.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Music";
	src: url("fonts/NotoMusic.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*Tokens*/
:root {
	color-scheme: dark;
	--bg: #0d1424;
	--bg-raised: #141d31;
	--bg-sunk: #0a101d;
	--line: #26304a;
	--line-soft: #1b2338;
	--text: #ebe6da;
	--text-muted: #98a2b8;
	--accent: #e7b75f;
	--accent-ink: #1a1405;
	--blue: #9fb4e8;
	--danger: #e57a6e;
	--ok: #7cc49a;
	--note-1: #e7b75f;
	--note-2: #9fb4e8;
	--note-3: #e9e3d3;
	--radius: 6px;
	--font: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/*Base*/
* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	min-height: 100%;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.5 var(--font);
	-webkit-font-smoothing: antialiased;
}
body {
	position: relative;
	overflow-x: hidden;
}

/*The falling-notes canvas sits behind everything*/
.notes-bg {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}
.page {
	position: relative;
	z-index: 1;
}

/*Five hairlines, like a stave, as the section divider*/
.stave {
	height: 17px;
	margin: 24px 0;
	background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 4px);
	opacity: 0.8;
}

a {
	color: var(--blue);
}
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}