/* Reset, page frame and the typography scale every screen inherits. */

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	background: var(--bg);
	color: var(--text);
	font: var(--t-body)/var(--lh-body) var(--font);
	-webkit-font-smoothing: antialiased;
}

body.dialog-open { overflow: hidden; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: var(--lh-tight); }
p { margin: 0; }

/* --- type roles ------------------------------------------------------------------------ */

.t-display { font-size: var(--t-display); font-weight: 640; letter-spacing: -.01em; }
.t-title { font-size: var(--t-title); font-weight: 620; }
.t-section { font-size: var(--t-section); font-weight: 620; letter-spacing: .01em; }
.t-label {
	font-size: var(--t-label);
	font-weight: 560;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
}
.t-caption { font-size: var(--t-caption); color: var(--muted); }
.t-muted { color: var(--muted); }
.t-mono { font-family: var(--mono); font-size: 12px; }
.t-num { font-variant-numeric: tabular-nums; }

.is-hidden { display: none !important; }
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- focus ----------------------------------------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	border-radius: var(--r1);
}

/* --- scrollbars, so dense panels do not shout ------------------------------------------ */

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
	background: var(--line-strong);
	border: 3px solid transparent;
	background-clip: content-box;
	border-radius: var(--r-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: content-box; }