/* ==========================================================================
   base.css — design tokens, reset, typography, a11y, @layer declarations
   ========================================================================== */

@layer reset, base, layout, components, utilities;

@layer base {
	:root {
		--color-bg: #ffffff;
		--color-text: #1a1a1a;
		--color-muted: #6b7280;
		--color-primary: #d62828;
		--color-primary-hover: #a51d1d;
		--color-border: #e5e7eb;
		--color-surface: #f9fafb;

		--font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		--font-heading: var(--font-base);

		--container-max: 1200px;

		--space-xs: 0.5rem;
		--space-sm: 1rem;
		--space-md: 1.5rem;
		--space-lg: 2.5rem;
		--space-xl: 4rem;

		--radius: 8px;
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);

		--transition-fast: 0.15s ease;
	}
}

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

	html { -webkit-text-size-adjust: 100%; }

	body {
		margin: 0;
		font-family: var(--font-base);
		font-size: 16px;
		line-height: 1.6;
		color: var(--color-text);
		background: var(--color-bg);
	}

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

	button {
		font: inherit;
		cursor: pointer;
	}
}

@layer base {
	a {
		color: var(--color-primary);
		text-decoration: none;
		transition: color var(--transition-fast);
	}

	a:hover,
	a:focus {
		color: var(--color-primary-hover);
		text-decoration: underline;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-heading);
		line-height: 1.25;
		margin: 0 0 var(--space-sm);
		font-weight: 700;
	}

	h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
	h2 { font-size: 1.75rem; }
	h3 { font-size: 1.375rem; }

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

@layer utilities {
	.screen-reader-text {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		width: 1px;
		overflow: hidden;
		position: absolute !important;
		word-wrap: normal !important;
	}

	.skip-link {
		position: absolute;
		left: -9999px;
		top: 0;
		z-index: 100;
		padding: var(--space-xs) var(--space-sm);
		background: var(--color-text);
		color: #fff;
	}

	.skip-link:focus {
		left: var(--space-sm);
		top: var(--space-sm);
	}
}