/**
 * Design Tokens
 *
 * このファイルは `DESIGN_TOKENS.md` と同期して扱う。直書きのHEXやマジックナンバーは
 * 原則禁止（例外は `DESIGN_TOKENS.md` に理由つきで記載）。
 *
 * Figma: https://www.figma.com/design/W3Xw3N02lWFO4PmdyQvJRu/TOP
 */

:root {
	/* ==========================================================================
	 * Color — Figma `sys/*` variables に準拠
	 * ======================================================================== */
	--color-text-default: #68543c;
	--color-text-inverse: #ffffff;
	--color-text-highlight: #ffed66;

	--color-bg-beige: #f2e8d8;
	--color-bg-green: #51968a;
	--color-bg-green-dark: #367368;
	--color-bg-brown: #68543c;
	--color-bg-brown-dark: #422d14;
	--color-bg-subtitle: #f0dc93;

	/* セマンティック別名（セクションで使う時はこちらを優先） */
	--color-page-bg: var(--color-bg-beige);
	--color-section-about-bg: var(--color-bg-green);
	--color-section-festival-bg: var(--color-bg-green);
	--color-footer-bg: var(--color-bg-brown-dark);
	--color-link: var(--color-text-default);
	--color-link-hover: var(--color-bg-brown-dark);

	/* ==========================================================================
	 * Typography — Figma `get_design_context`（ノード 1:2）に準拠
	 *   - 本文・見出しの大半: Noto Sans JP
	 *   - KV の4行コピー: Noto Serif JP Bold（--font-family-serif）
	 *   - サイズはモバイル基準 → タブレット/デスクトップでオーバーライド可能。
	 * ======================================================================== */
	--font-family-serif:
		"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
		"HG明朝E", "MS P明朝", serif;
	--font-family-sans:
		"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
		"YuGothic", "Meiryo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-family-base: var(--font-family-sans);

	--font-size-xs: 12px;
	--font-size-sm: 14px;
	--font-size-md: 16px;
	--font-size-lg: 18px;
	--font-size-xl: 22px;
	--font-size-2xl: 26px;
	--font-size-3xl: 32px;
	--font-size-display: 40px;

	/* セクション別フォントサイズ */
	--font-size-section-heading-title: 27px;
	--font-size-site-header-title: clamp(21px, 2.666vw, 32px);;
	--font-size-kv-copy: clamp(32px, 4vw, 48px);
	--font-size-floating-nav-link: 17px;

	/* 行高（倍率。用途名のトークンを参照すること） */
	--line-height-none: 0;
	--line-height-solid: 1;
	--line-height-tight: 1.3;
	--line-height-prose: 1.8;
	--line-height-loose: 2;
	--line-height-expressive: 2.4;
	--line-height-base: var(--line-height-solid);

	--letter-spacing-base: 0.04em;
	--letter-spacing-wide: 0.12em;

	/* ==========================================================================
	 * Spacing — 8px グリッドを基本
	 * ======================================================================== */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;

	/* セクション外周の余白（帯別。min-width メディア側で上書き） */
	--space-section-y: var(--space-10);
	--space-section-x: var(--space-5);

	/* ==========================================================================
	 * Radius / Shadow / Transition
	 * ======================================================================== */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-pill: 9999px;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);

	--transition-base: 200ms ease;
	--transition-slow: 400ms ease;

	/* ==========================================================================
	 * Layout
	 *   - Figma の正はモバイル（iPhone 17 想定、~402px）
	 *   - BP: 600px / 1200px（モバイルファースト min-width で上書き）
	 * ======================================================================== */
	--bp-tablet: 600px;   /* 表示用の定数。実装の @media 条件はリテラルで書く */
	--bp-desktop: 1200px;

	--layout-max-md: 720px;  /* タブレットでのコンテナ最大幅 */
	--layout-max-lg: 1040px; /* デスクトップでのコンテナ最大幅 */

	/* ==========================================================================
	 * z-index
	 * ======================================================================== */
	--z-floating-nav: 50;
	--z-overlay: 100;
}

/* タブレット帯（600px〜） */
@media (min-width: 600px) {
	:root {
		--space-section-y: var(--space-16);
		--space-section-x: var(--space-8);

		--font-size-xs: 14px;
		--font-size-sm: 16px;
		--font-size-md: 18px;
		--font-size-lg: 20px;
		--font-size-xl: 24px;
		--font-size-2xl: 30px;
		--font-size-3xl: 36px;
		--font-size-display: 48px;
		--font-size-section-heading-title: 36px;
		--font-size-floating-nav-link: 18px;
	}
}

/* デスクトップ帯（1200px〜） */
@media (min-width: 1200px) {
	:root {
		--space-section-y: var(--space-20);
		--space-section-x: var(--space-10);

		--font-size-xs: 16px;
		--font-size-sm: 18px;
		--font-size-md: 20px;
		--font-size-lg: 22px;
		--font-size-xl: 26px;
		--font-size-2xl: 32px;
		--font-size-3xl: 40px;
		--font-size-display: 56px;
		--font-size-section-heading-title: 44px;
		--font-size-floating-nav-link: 18px;
	}
}