@layer tokens {
	:root {
		--primary-navy: #0E1B2C;
		--surface-navy: #16263B;
		--deep-bg: #070F1C;
		--accent-gold: #C8A66A;
		--accent-gold-dark: #8A6B2E;
		--text-white: #ECE6D6;
		--sub-text: #B5B0A4;
		--divider: #1F2D3F;
		--light-bg: #F5F5F5;
		--light-bg-pure: #FFFFFF;
		--light-text: #222222;
		--light-text-sub: #555555;
		--loading-text: #5A6A82;
		--font-heading: "Noto Serif JP", serif;
		--font-body: "Noto Sans JP", sans-serif;
		--content-width: 1080px;
		--wide-width: 1280px;
		--header-height: clamp(64px, 8vw, 88px);
		--loading-duration: 1.6s;
		--loading-hold: 0.4s;
		--loading-fadeout-delay: 2s;
		--loading-fadeout-duration: 0.4s;
	}

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

	html {
		scroll-behavior: smooth;
		scroll-padding-top: var(--header-height);
	}

	body {
		margin: 0;
		background: var(--primary-navy);
		color: var(--text-white);
		font-family: var(--font-body);
		font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
		line-height: 1.8;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
	}

	body.is-nav-open {
		overflow: hidden;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-block: 0 0.65em;
		color: inherit;
		font-family: var(--font-heading);
		font-weight: 700;
		line-height: 1.45;
	}

	p {
		margin-block: 0 1em;
	}

	a {
		color: inherit;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.22em;
	}

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

	button,
	input,
	select,
	textarea {
		font: inherit;
	}

	:focus-visible {
		outline: 2px solid var(--accent-gold);
		outline-offset: 4px;
	}

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