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

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

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

	body,
	h1,
	h2,
	h3,
	h4,
	p,
	figure {
		margin: 0;
	}

	ul,
	ol {
		margin: 0;
		padding: 0;
		list-style: none;
	}

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

	a {
		color: inherit;
	}

	button {
		font: inherit;
		color: inherit;
		background: none;
		border: 0;
		cursor: pointer;
	}
}

@layer tokens {
	:root {
		/* Color: backgrounds */
		--color-bg-page: #f7f8f6;
		--color-bg-surface: #ffffff;
		--color-bg-subtle: #f0f3f0;

		/* Color: text */
		--color-text-heading: #17201a;
		--color-text-body: #2b2f2c;
		--color-text-muted: #667068;

		/* Color: accent (buttons, CTAs, focus ring) */
		--color-primary-600: #2f6b4f;
		--color-primary-700: #24563f;
		--color-primary-tint: #eaf3ed;

		/* Color: in-content links (distinct from button accent) */
		--color-link: #245e46;

		/* Color: borders */
		--color-border-200: #dde3de;
		--color-border-300: #c7d3ca;

		/* Color: reserved for future form validation states (currently unused) */
		--color-error-700: #c62828;

		/* Typography (docs/markdown spec 4.1), mobile values by default */
		--font-sans: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
		--font-size-h1: clamp(2rem, 4vw, 3.25rem);
		--font-size-h2: 1.625rem;
		--font-size-h3: 1.3125rem;
		--font-size-body: 1rem;
		--font-size-meta: 0.8125rem;
		--font-size-button: 1rem;

		/* Spacing (docs/markdown spec 4.2) */
		--space-1: 4px;
		--space-2: 8px;
		--space-3: 16px;
		--space-4: 24px;
		--space-6: 32px;
		--space-8: 48px;
		--space-12: 64px;
		--space-16: 96px;

		/* Layout widths (docs/markdown spec 4.2 / 14.2) */
		--content-wide: 80rem;
		--content-reading: 50rem;

		/* Effects (docs/markdown spec 14.2) */
		--radius-sm: 0.625rem;
		--radius-md: 1rem;
		--shadow-1: 0 2px 8px rgb(0 0 0 / 8%);
		--motion-fast: 160ms;
	}

	@media (min-width: 768px) {
		:root {
			--font-size-h2: 2rem;
			--font-size-h3: 1.5rem;
			--font-size-body: 1.125rem;
			--font-size-meta: 0.875rem;
		}
	}
}

@layer base {
	html {
		font-family: var(--font-sans);
		color: var(--color-text-body);
		background: var(--color-bg-page);
	}

	body {
		font-size: var(--font-size-body);
		line-height: 1.8;
	}

	h1 {
		font-size: var(--font-size-h1);
		font-weight: 700;
		line-height: 1.2;
		color: var(--color-text-heading);
	}

	h2 {
		font-size: var(--font-size-h2);
		font-weight: 700;
		line-height: 1.3;
		color: var(--color-text-heading);
	}

	h3 {
		font-size: var(--font-size-h3);
		font-weight: 700;
		line-height: 1.4;
		color: var(--color-text-heading);
	}

	small,
	.meta {
		font-size: var(--font-size-meta);
		line-height: 1.6;
	}

	a {
		color: var(--color-link);
	}

	a:hover,
	a:focus-visible {
		color: var(--color-primary-700);
	}

	:focus-visible {
		outline: 2px solid var(--color-primary-600);
		outline-offset: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}