/*
 * TCguitar Child — Base reset + typography
 * Falls in @layer reset and @layer base so components/snippets can override.
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html, body { overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; }

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

pre, code { overflow-wrap: anywhere; }
pre { max-width: 100%; overflow-x: auto; }

a {
	color: inherit;
	text-decoration: none;
	transition: color .15s;
}
a:hover { color: var(--accent); }

em, i { font-style: italic; }
strong, b { font-weight: 600; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--text);
	margin: 0 0 0.4em;
	text-wrap: balance;
}
h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; }
h2 { font-size: clamp(26px, 2.8vw, 36px); }
h3 { font-size: clamp(20px, 2vw, 26px); }
h4 { font-size: 20px; }

p {
	margin: 0 0 1em;
	text-wrap: pretty;
}

code, pre, kbd, samp {
	font-family: var(--font-mono);
	font-size: 0.92em;
}

hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 2em 0;
}

::selection {
	background: color-mix(in oklab, var(--accent) 20%, transparent);
	color: var(--text);
}