/* ==========================================================================
   基本スタイル・タイポグラフィ
   ========================================================================== */

/* --------------------------------------------------------------------------
   @font-face — @layer 外で宣言することでブラウザが確実に認識する
   -------------------------------------------------------------------------- */

/* 見出し用ディスプレイフォント */
@font-face {
	font-family: "Anton SC";
	src: url("../fonts/AntonSC-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* 日本語本文 */
@font-face {
	font-family: "Zen Antique Soft";
	src: url("../fonts/ZenAntiqueSoft-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* 英語本文 — Variable font (wght 軸) */
@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf")
		format("truetype");
	font-weight: 400 900;
	font-style: italic;
	font-display: swap;
}

/* 多言語対応予備 (ハングル等) — 現在は未使用 */
@font-face {
	font-family: "Black And White Picture";
	src: url("../fonts/BlackAndWhitePicture-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@layer base {
	:root {
		/* Color Palette — light */
		--color-primary: #1a1917;
		--color-accent: #2b5940;
		--color-accent-alt: #a5712e;
		--color-border: #cbc6bc;
		--color-text: #2e2c28;
		--color-text-light: #78746e;
		--color-bg: #f7f5f0;
		--color-bg-light: #f0ece3;
		--color-bg-dark: #e6e1d5;

		/* Typography */
		--font-family-sans: "Playfair Display", "Zen Antique Soft", sans-serif;
		--font-family-heading: "Anton SC", "Zen Antique Soft", sans-serif;
		--font-family-multilingual:
			"Black And White Picture", sans-serif; /* 多言語対応時に使用 */
		--font-family-mono: "Courier New", Courier, monospace;
		--font-size-base: 16px;
		--line-height-base: 1.6;
		--font-weight-normal: 400;
		--font-weight-medium: 500;
		--font-weight-semibold: 600;
		--font-weight-bold: 700;

		/* Spacing */
		--spacing-xs: 0.25rem;
		--spacing-sm: 0.5rem;
		--spacing-md: 1rem;
		--spacing-lg: 1.5rem;
		--spacing-xl: 2rem;
		--spacing-2xl: 3rem;
		--spacing-3xl: 4rem;
		--spacing-4xl: 6rem;

		/* Border radius */
		--radius-sm: 2px;
		--radius-md: 4px;
		--radius-lg: 4px;
		--radius-xl: 6px;
		--radius-full: 9999px;

		/* Shadows */
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
		--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
		--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
		--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

		/* Transitions */
		--transition-fast: 150ms ease;
		--transition-base: 250ms ease;
		--transition-slow: 350ms ease;

		/* Z-index */
		--z-dropdown: 100;
		--z-sticky: 200;
		--z-fixed: 300;
		--z-modal-backdrop: 400;
		--z-modal: 500;
		--z-popover: 600;
		--z-tooltip: 700;
	}

	/* ダークモード — light-dark() でトークンを一元管理 */
	:root {
		color-scheme: light dark;

		--color-primary: light-dark(#1a1917, #e8e3d9);
		--color-text: light-dark(#2e2c28, #e4dfd6);
		--color-text-light: light-dark(#78746e, #8a8580);
		--color-bg: light-dark(#f7f5f0, #111009);
		--color-bg-light: light-dark(#f0ece3, #1c1b17);
		--color-bg-dark: light-dark(#e6e1d5, #2a2822);
		--color-border: light-dark(#cbc6bc, #363330);
		--color-accent: light-dark(#2b5940, #5aab7e);
		--color-accent-alt: light-dark(#a5712e, #c99152);
	}

	/* HTML & Body */
	html {
		font-size: var(--font-size-base);
		font-family: var(--font-family-sans);
		line-height: var(--line-height-base);
		color: var(--color-text);
		background-color: var(--color-bg);
		scroll-behavior: smooth;
	}

	body {
		font-weight: var(--font-weight-normal);
		background-color: var(--color-bg);
	}

	/* View Transitions — ページ遷移アニメーション */
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: vt-fade-out 200ms ease-out;
	}

	::view-transition-new(root) {
		animation: vt-fade-in 250ms ease-in;
	}

	@keyframes vt-fade-out {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}

	@keyframes vt-fade-in {
		from {
			opacity: 0;
			transform: translateY(6px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		::view-transition-old(root),
		::view-transition-new(root) {
			animation: none;
		}
	}

	/* Typography — Headings */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--font-family-heading);
		font-weight: var(--font-weight-bold);
		line-height: 1.3;
		margin-bottom: var(--spacing-md);
	}

	h1 {
		font-size: clamp(2rem, 5vw, 3.5rem);
	}
	h2 {
		font-size: clamp(1.4rem, 3.5vw, 2rem);
	}
	h3 {
		font-size: clamp(1rem, 2.5vw, 1.35rem);
	}
	h4 {
		font-size: 1.15rem;
	}
	h5 {
		font-size: 1rem;
	}
	h6 {
		font-size: 1rem;
	}

	/* Typography — Text */
	p {
		margin-bottom: var(--spacing-md);
		line-height: var(--line-height-base);
		color: var(--color-text);

		&:last-child {
			margin-bottom: 0;
		}
	}

	strong {
		font-weight: var(--font-weight-bold);
		color: var(--color-text);
	}

	em {
		font-style: italic;
	}

	small {
		font-size: 0.875rem;
		color: var(--color-text-light);
	}

	/* Lists */
	ul,
	ol {
		list-style-position: outside;
		margin-bottom: var(--spacing-md);
		padding-left: var(--spacing-lg);

		& li {
			margin-bottom: var(--spacing-sm);
			color: var(--color-text);
		}
	}

	/* Links */
	a {
		color: var(--color-accent);
		text-decoration: none;
		transition: color var(--transition-fast);
		cursor: pointer;

		&:hover {
			color: var(--color-accent-alt);
			text-decoration: underline;
		}

		&:active {
			opacity: 0.8;
		}
	}

	/* Code */
	code,
	pre {
		font-family: var(--font-family-mono);
		font-size: 0.875rem;
	}

	code {
		background-color: var(--color-bg-light);
		padding: var(--spacing-xs) var(--spacing-sm);
		border-radius: var(--radius-sm);
		color: var(--color-text);
	}

	pre {
		background-color: var(--color-bg-light);
		padding: var(--spacing-md);
		border-radius: var(--radius-md);
		overflow-x: auto;
		margin-bottom: var(--spacing-md);

		& code {
			background-color: transparent;
			padding: 0;
		}
	}

	/* Blockquote */
	blockquote {
		margin-bottom: var(--spacing-md);
		padding-left: var(--spacing-lg);
		border-left: 4px solid var(--color-accent);
		color: var(--color-text-light);
		font-style: italic;
	}

	/* Horizontal rule */
	hr {
		border: none;
		border-top: 1px solid var(--color-border);
		margin: var(--spacing-xl) 0;
	}

	/* Forms */
	input,
	textarea,
	select {
		width: 100%;
		padding: var(--spacing-sm) var(--spacing-md);
		font-size: var(--font-size-base);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background-color: var(--color-bg);
		color: var(--color-text);
		transition:
			border-color var(--transition-fast),
			box-shadow var(--transition-fast);

		&:focus {
			outline: none;
			border-color: var(--color-accent);
			box-shadow: 0 0 0 3px
				color-mix(in srgb, var(--color-accent) 20%, transparent);
		}

		&:disabled {
			background-color: var(--color-bg-light);
			color: var(--color-text-light);
			cursor: not-allowed;
		}
	}

	textarea {
		resize: vertical;
		font-family: var(--font-family-sans);
		/* 内容に合わせて自動伸長 */
		field-sizing: content;
		min-block-size: 8lh;
	}

	/* Selection */
	::selection {
		background-color: var(--color-accent);
		color: #ffffff;
	}
}