/* =============================================================
   base.css — Reset + Global Typography + Body + Links
   Imports tokens.css first (HTML must load tokens.css before this)
   ============================================================= */

/* ----------------------------------------------------------
   1. Box model reset
   ---------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ----------------------------------------------------------
   2. Document root
   ---------------------------------------------------------- */
html {
	font-size: var(--size-md);
	scroll-behavior: smooth;
	text-size-adjust: 100%;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
		scroll-behavior: auto;
	}
}

/* ----------------------------------------------------------
   3. Body
   ---------------------------------------------------------- */
body {
	font-family: var(--font-body);
	font-size: var(--size-md);
	font-weight: var(--weight-normal);
	line-height: var(--lh-base);
	color: var(--fg);
	background-color: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* ----------------------------------------------------------
   4. Headings — Display font (Georgia serif)
   ---------------------------------------------------------- */
h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
	color: var(--fg);
}

h1 {
	font-size: clamp(var(--size-xl), 5vw, 56px);
	line-height: var(--lh-tight);
}

h2 {
	font-size: var(--size-xl);
	line-height: var(--lh-snug);
}

h3 {
	font-size: var(--size-lg);
	line-height: var(--lh-snug);
}

h4 {
	font-size: var(--size-md);
	line-height: var(--lh-base);
}

/* ----------------------------------------------------------
   5. Body copy
   ---------------------------------------------------------- */
p {
	font-size: var(--size-md);
	line-height: var(--lh-base);
	color: var(--fg);
	max-width: 65ch;
}

p + p {
	margin-top: var(--s-3);
}

small,
.text-sm {
	font-size: var(--size-sm);
	line-height: var(--lh-base);
}

.text-muted {
	color: var(--muted);
}

/* ----------------------------------------------------------
   6. Links
   ---------------------------------------------------------- */
a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition:
		color var(--transition),
		opacity var(--transition);
}

a:hover {
	color: var(--fg);
	text-decoration-thickness: 2px;
}

a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: var(--r-1);
	text-decoration: none;
}

a:active {
	opacity: 0.75;
}

/* ----------------------------------------------------------
   7. Code / monospace
   ---------------------------------------------------------- */
code,
kbd,
pre,
samp {
	font-family: var(--font-mono);
	font-size: var(--size-sm);
}

code {
	background: var(--state-empty);
	border: 1px solid var(--border);
	border-radius: var(--r-1);
	padding: 1px 6px;
	color: var(--fg);
}

pre {
	background: var(--fg);
	color: #f9fafb;
	border-radius: var(--r-2);
	padding: var(--s-4);
	overflow-x: auto;
	line-height: var(--lh-base);
}

pre code {
	background: transparent;
	border: none;
	padding: 0;
	color: inherit;
	font-size: var(--size-sm);
}

/* ----------------------------------------------------------
   8. Lists
   ---------------------------------------------------------- */
ul,
ol {
	padding-left: var(--s-4);
}

li {
	margin-bottom: var(--s-1);
	line-height: var(--lh-base);
}

/* ----------------------------------------------------------
   9. Horizontal rule
   ---------------------------------------------------------- */
hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: var(--s-6) 0;
}

/* ----------------------------------------------------------
   10. Images / media
   ---------------------------------------------------------- */
img,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
}

/* ----------------------------------------------------------
   11. Utility: visually hidden (accessible)
   ---------------------------------------------------------- */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------------------------
   12. Utility: container
   ---------------------------------------------------------- */
.container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--s-4);
}

/* ----------------------------------------------------------
   13. Skip nav (accessibility)
   ---------------------------------------------------------- */
.skip-nav {
	position: absolute;
	top: -100%;
	left: var(--s-4);
	background: var(--accent);
	color: var(--bg);
	padding: var(--s-2) var(--s-4);
	font-weight: var(--weight-bold);
	border-radius: var(--r-1);
	z-index: calc(var(--z-header) + 1);
	text-decoration: none;
	transition: top var(--transition);
}

.skip-nav:focus {
	top: var(--s-2);
}