/* =====================================================
   SPK — Base (reset + typography + a11y primitives)
   ===================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-relaxed);
	color: var(--color-text-primary);
	background: var(--color-bg-default);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img, svg, video, canvas, picture {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-serif);
	font-weight: var(--fw-medium);
	color: var(--color-text-primary);
	letter-spacing: var(--ls-tight);
	margin: 0 0 var(--space-4);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-body-lg); line-height: var(--lh-snug); }

p { margin: 0 0 var(--space-4); }

a {
	color: var(--color-primary-teal);
	text-decoration: none;
	transition: color var(--transition-fast);
}
a:hover { text-decoration: underline; }
a:focus-visible {
	outline: 2px solid var(--color-primary-teal);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Lists (reset) */
ul, ol { padding-left: 1.25em; margin: 0 0 var(--space-4); }

/* Tables */
table { border-collapse: collapse; width: 100%; }
th, td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: var(--border-normal); }
th { font-weight: var(--fw-medium); }

/* Code */
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.95em; }
code {
	background: var(--color-bg-white);
	border: var(--border-normal);
	border-radius: var(--radius-sm);
	padding: 0 var(--space-1);
}

/* ===== Forms ===== */
input, select, textarea, button {
	font: inherit;
	color: inherit;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="date"], select, textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	background: var(--color-bg-white);
	border: var(--border-normal);
	border-radius: var(--radius-md);
	min-height: 44px; /* WCAG 2.2 target size */
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--color-primary-teal);
	outline-offset: 1px;
	border-color: var(--color-primary-teal);
}
textarea { min-height: 120px; resize: vertical; }

label { display: block; margin-bottom: var(--space-1); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.required-mark { color: var(--color-error); margin-left: 2px; }

.form-help { font-size: var(--fs-small); color: var(--color-text-secondary); margin-top: var(--space-1); }
.form-error {
	font-size: var(--fs-small);
	color: var(--color-error);
	margin-top: var(--space-1);
	display: block;
}

/* ===== A11y primitives ===== */

/* Skip link (first focusable element) */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--z-toast);
	padding: var(--space-3) var(--space-5);
	background: var(--color-primary-dark);
	color: var(--color-bg-white);
	text-decoration: none;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.skip-link:focus {
	left: var(--space-4);
	top: var(--space-4);
}

/* Visually-hidden (for screen-readers) */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Global focus visible */
*:focus-visible {
	outline: 2px solid var(--color-primary-teal);
	outline-offset: 2px;
}

/* Containers */
.container {
	width: 100%;
	max-width: var(--container-default);
	margin: 0 auto;
	padding-left: var(--space-4);
	padding-right: var(--space-4);
}
.container--prose {
	max-width: var(--container-prose);
}
.container--wide {
	max-width: var(--container-wide);
}

/* Site layout */
.site-main { display: block; min-height: 50vh; }

/* Section spacing rhythm */
.section { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.section--sm { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.section--lg { padding-top: var(--space-20); padding-bottom: var(--space-20); }

@media (min-width: 1024px) {
	.section { padding-top: var(--space-20); padding-bottom: var(--space-20); }
	.section--lg { padding-top: var(--space-24); padding-bottom: var(--space-24); }
}

/* Blockquote */
blockquote {
	border-left: 3px solid var(--color-primary-teal);
	margin: var(--space-6) 0;
	padding: var(--space-1) var(--space-4);
	font-family: var(--font-serif);
	font-size: var(--fs-body-lg);
	color: var(--color-text-primary);
}

hr {
	border: 0;
	border-top: var(--border-normal);
	margin: var(--space-8) 0;
}