/**
 * css/foundation/tokens.css
 * ============================================================
 * A LEGEND 2：Design Tokens
 * ============================================================
 *
 * 役割：
 * - A LEGEND 2全体で使う色、余白、角丸、影、文字サイズ、Z-indexを定義します。
 * - PHP側の inc/design/css-vars.php から出力されるCSS変数を受け取り、
 *   未設定時でも破綻しないフォールバックを持たせます。
 *
 * 方針：
 * - ここでは「値の基準」だけを定義します。
 * - 各コンポーネントやページ固有の見た目は別CSSへ分割します。
 *
 * 今回の改修：
 * - PHP側から出力される "--aleg2-setting-*" を正規入力として受け取ります。
 * - 各CSSが実際に使う "--aleg2-color-*" / "--aleg2-container-*"
 *   / "--aleg2-radius-*" / "--aleg2-shadow-*" へ変換します。
 * - 旧CSSで使われている既存トークン名は維持します。
 * - design.colors.accent / accent_2 を primary / secondary / accent へ接続します。
 * - design.colors.heading / link / link_hover / danger / success / warning を
 *   フロント全体で使えるようにします。
 * - design.layout / radius / shadow / buttons / background の設定を
 *   foundation層から参照できるようにします。
 * - 固定ダーク前提の値を直接各ページへ持たせないため、
 *   overlay / glass / glow / on-color などのsemantic tokenを追加します。
 */

:root {
	/* ---------------------------------------------
	 * Brand Colors
	 * ---------------------------------------------
	 *
	 * 設計：
	 * - "--aleg2-setting-*" はPHP出力の正規入力です。
	 * - "--aleg2-color-*" はCSS全体で使う実使用トークンです。
	 * - settingが未出力でもテーマが破綻しないよう、必ずfallbackを持たせます。
	 */

	/**
	 * 背景色。
	 *
	 * design.colors.bg から入る想定です。
	 * body / main / page背景の基準になります。
	 */
	--aleg2-color-bg: var(--aleg2-setting-color-bg, #070911);

	/**
	 * 背景の少し明るい面。
	 *
	 * 旧CSSで使っていた bg-soft を維持しつつ、
	 * surface設定がある場合はそちらへ自然に寄せます。
	 */
	--aleg2-color-bg-soft: var(--aleg2-setting-color-bg-soft, var(--aleg2-setting-color-surface, #101521));

	/**
	 * 通常のカード・パネル面。
	 *
	 * design.colors.surface から入る想定です。
	 */
	--aleg2-color-surface: var(--aleg2-setting-color-surface, rgba(255, 255, 255, 0.06));

	/**
	 * 強めのカード・hover面・ドロワー面。
	 *
	 * PHP側では design.colors.surface_2 を
	 * "--aleg2-setting-color-surface-2" として出力します。
	 * 旧名 "--aleg2-setting-color-surface-strong" もfallbackとして残します。
	 */
	--aleg2-color-surface-strong: var(
		--aleg2-setting-color-surface-2,
		var(--aleg2-setting-color-surface-strong, rgba(255, 255, 255, 0.12))
	);

	/**
	 * 互換用：
	 * 既存CSSが "--aleg2-color-surface-2" を参照している場合も壊さないようにします。
	 */
	--aleg2-color-surface-2: var(--aleg2-color-surface-strong);

	/**
	 * 本文色。
	 */
	--aleg2-color-text: var(--aleg2-setting-color-text, #f7f7fb);

	/**
	 * 見出し色。
	 *
	 * design.colors.heading が未設定の場合は本文色を使います。
	 */
	--aleg2-color-heading: var(--aleg2-setting-color-heading, var(--aleg2-color-text));

	/**
	 * 補足テキスト色。
	 *
	 * PHP側は "--aleg2-setting-color-muted" を出します。
	 * 旧tokensの "--aleg2-setting-color-text-muted" もfallbackとして残します。
	 */
	--aleg2-color-text-muted: var(
		--aleg2-setting-color-muted,
		var(--aleg2-setting-color-text-muted, rgba(247, 247, 251, 0.72))
	);

	/**
	 * さらに薄い補足テキスト。
	 *
	 * 明示設定がない場合はmutedと同系統のfallbackを使います。
	 */
	--aleg2-color-text-faint: var(--aleg2-setting-color-text-faint, rgba(247, 247, 251, 0.48));

	/**
	 * 互換用：
	 * 既存CSSが "--aleg2-color-muted" を参照している場合も同じ値に揃えます。
	 */
	--aleg2-color-muted: var(--aleg2-color-text-muted);

	/**
	 * メインアクセント。
	 *
	 * 管理画面の design.colors.accent をPHP側で
	 * "--aleg2-setting-color-primary" と "--aleg2-setting-color-accent" の両方に接続します。
	 */
	--aleg2-color-primary: var(--aleg2-setting-color-primary, #8ee6ff);

	/**
	 * サブアクセント。
	 *
	 * 管理画面の design.colors.accent_2 をPHP側で
	 * "--aleg2-setting-color-secondary" に接続します。
	 */
	--aleg2-color-secondary: var(--aleg2-setting-color-secondary, #b68cff);

	/**
	 * 装飾アクセント。
	 *
	 * 基本はprimaryと同じ値にし、CSS側の既存参照も維持します。
	 */
	--aleg2-color-accent: var(--aleg2-setting-color-accent, var(--aleg2-color-primary));

	/**
	 * 互換用：
	 * 旧CSS / PHP出力が accent-2 を使っている場合に備えます。
	 */
	--aleg2-color-accent-2: var(--aleg2-color-secondary);

	/**
	 * リンク色。
	 *
	 * design.colors.link が未設定の場合はprimaryを使います。
	 */
	--aleg2-color-link: var(--aleg2-setting-color-link, var(--aleg2-color-primary));

	/**
	 * リンクhover色。
	 *
	 * design.colors.link_hover が未設定の場合はaccentを使います。
	 */
	--aleg2-color-link-hover: var(--aleg2-setting-color-link-hover, var(--aleg2-color-accent));

	/**
	 * 状態色。
	 *
	 * Contact / Adult Gate / Form validation などで使います。
	 */
	--aleg2-color-danger: var(--aleg2-setting-color-danger, #ff6b8a);
	--aleg2-color-success: var(--aleg2-setting-color-success, #73e6a4);
	--aleg2-color-warning: var(--aleg2-setting-color-warning, #ffcf5a);

	/**
	 * 枠線。
	 */
	--aleg2-color-border: var(--aleg2-setting-color-border, rgba(255, 255, 255, 0.14));

	/**
	 * 強い枠線。
	 *
	 * 明示設定がない場合は通常borderのfallbackより少し強い値を使います。
	 */
	--aleg2-color-border-strong: var(--aleg2-setting-color-border-strong, rgba(255, 255, 255, 0.28));

	/* ---------------------------------------------
	 * Semantic Colors
	 * ---------------------------------------------
	 *
	 * 目的：
	 * - 固定ダーク色を各CSSへ直書きしないための意味トークンです。
	 * - ライト系プリセットでもダーク系プリセットでも、
	 *   CSS側は同じ名前を参照できます。
	 */

	/**
	 * surface上の文字。
	 */
	--aleg2-color-on-surface: var(--aleg2-setting-color-on-surface, var(--aleg2-color-text));

	/**
	 * primary背景上の文字。
	 *
	 * 既存のCTAでは暗色文字を使っていたため、fallbackは濃色にしています。
	 * 将来、管理画面でon-primaryを持たせる場合はsettingで上書きできます。
	 */
	--aleg2-color-on-primary: var(--aleg2-setting-color-on-primary, #061018);

	/**
	 * secondary背景上の文字。
	 */
	--aleg2-color-on-secondary: var(--aleg2-setting-color-on-secondary, #061018);

	/**
	 * 反転面・暗いoverlay上の文字。
	 */
	--aleg2-color-on-inverse: var(--aleg2-setting-color-on-inverse, #ffffff);

	/**
	 * 汎用focus ring。
	 */
	--aleg2-focus-ring: var(--aleg2-setting-focus-ring, 0 0 0 3px rgba(142, 230, 255, 0.28));

	/**
	 * glass背景。
	 *
	 * card / filter / header / drawer / panel の共通基準です。
	 */
	--aleg2-glass-bg: var(--aleg2-setting-glass-bg, var(--aleg2-color-surface));
	--aleg2-glass-bg-strong: var(--aleg2-setting-glass-bg-strong, var(--aleg2-color-surface-strong));

	/**
	 * overlay。
	 *
	 * Hero / media / modal / darken用途の基準です。
	 */
	--aleg2-overlay-soft: var(--aleg2-setting-overlay-soft, rgba(7, 9, 17, 0.38));
	--aleg2-overlay-strong: var(--aleg2-setting-overlay-strong, rgba(7, 9, 17, 0.72));

	/**
	 * Hero専用overlay。
	 *
	 * 設計：
	 * - PHP側の inc/design/css-vars.php が、design.colors.bg の明るさを見て
	 *   白基調・黒基調に合うHero overlayを --aleg2-setting-hero-* として出力します。
	 * - ここではその受け皿だけを定義し、top-hero.css が固定黒へ戻らないようにします。
	 * - fallbackは既存の背景色トークンへ寄せ、プリセット未反映時でも思想が崩れにくくします。
	 */
	--aleg2-hero-overlay: var(
		--aleg2-setting-hero-overlay,
		linear-gradient(
			90deg,
			color-mix(in srgb, var(--aleg2-color-bg) 88%, transparent),
			color-mix(in srgb, var(--aleg2-color-bg) 46%, transparent) 52%,
			color-mix(in srgb, var(--aleg2-color-bg) 18%, transparent)
		)
	);
	--aleg2-hero-overlay-strong: var(
		--aleg2-setting-hero-overlay-strong,
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--aleg2-color-bg) 12%, transparent),
			color-mix(in srgb, var(--aleg2-color-bg) 76%, transparent)
		)
	);
	--aleg2-hero-overlay-soft: var(
		--aleg2-setting-hero-overlay-soft,
		linear-gradient(115deg, color-mix(in srgb, var(--aleg2-color-bg) 46%, transparent), transparent 48%, color-mix(in srgb, var(--aleg2-color-heading) 8%, transparent))
	);
	--aleg2-hero-surface-glow: var(
		--aleg2-setting-hero-surface-glow,
		radial-gradient(circle at 74% 28%, color-mix(in srgb, var(--aleg2-color-secondary) 20%, transparent), transparent 34%),
		radial-gradient(circle at 22% 74%, color-mix(in srgb, var(--aleg2-color-primary) 16%, transparent), transparent 36%)
	);
	--aleg2-hero-vignette: var(
		--aleg2-setting-hero-vignette,
		radial-gradient(circle at 50% 48%, transparent 52%, color-mix(in srgb, var(--aleg2-color-bg) 62%, transparent) 100%)
	);
	--aleg2-hero-text-shadow: var(
		--aleg2-setting-hero-text-shadow,
		0 2px 24px rgba(0, 0, 0, 0.42)
	);
	--aleg2-hero-readable-surface: var(
		--aleg2-setting-hero-readable-surface,
		color-mix(in srgb, var(--aleg2-color-bg) 64%, transparent)
	);
	--aleg2-hero-noise-opacity: var(--aleg2-setting-hero-noise-opacity, calc(.08 * var(--aleg2-bg-grain, 1)));

	/**
	 * 背景グロー。
	 *
	 * body / top / archive / single / footer などで使う共通装飾です。
	 */
	--aleg2-glow-primary: var(--aleg2-setting-glow-primary, rgba(142, 230, 255, 0.12));
	--aleg2-glow-secondary: var(--aleg2-setting-glow-secondary, rgba(182, 140, 255, 0.12));
	--aleg2-glow-accent: var(--aleg2-setting-glow-accent, rgba(255, 207, 90, 0.08));

	/* ---------------------------------------------
	 * Typography
	 * ---------------------------------------------
	 *
	 * 設計：
	 * - PHP側は design.fonts.body / heading / latin を
	 *   setting変数として出力します。
	 * - 既存CSSが font-sans / font-serif を参照しているため、それも維持します。
	 */

	/**
	 * 本文フォント。
	 */
	--aleg2-font-body: var(
		--aleg2-setting-font-body,
		system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
	);

	/**
	 * 見出しフォント。
	 */
	--aleg2-font-heading: var(
		--aleg2-setting-font-heading,
		"Times New Roman", "Yu Mincho", "YuMincho", serif
	);

	/**
	 * 英字装飾フォント。
	 */
	--aleg2-font-latin: var(
		--aleg2-setting-font-latin,
		"Times New Roman", "Yu Mincho", "YuMincho", serif
	);

	/**
	 * 既存互換：
	 * 旧CSSの font-sans / font-serif / font-mono は維持します。
	 */
	--aleg2-font-sans: var(--aleg2-font-body);
	--aleg2-font-serif: var(--aleg2-font-heading);
	--aleg2-font-mono: var(
		--aleg2-setting-font-mono,
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace
	);

	/**
	 * 基準文字サイズ。
	 *
	 * typography.css で body のfont-sizeとして利用できます。
	 */
	--aleg2-font-size-base: var(--aleg2-setting-font-size-base, 16px);

	/**
	 * 既存のレスポンシブ文字サイズ。
	 *
	 * 直接設定値へ置き換えず、既存のclamp設計は維持します。
	 * base_size は body基準値として使い、見出しスケールは従来どおりtoken管理します。
	 */
	--aleg2-font-size-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
	--aleg2-font-size-sm: clamp(0.82rem, 0.78rem + 0.22vw, 0.95rem);
	--aleg2-font-size-md: clamp(1rem, 0.96rem + 0.25vw, 1.1rem);
	--aleg2-font-size-lg: clamp(1.15rem, 1.05rem + 0.55vw, 1.45rem);
	--aleg2-font-size-xl: clamp(1.45rem, 1.22rem + 1.2vw, 2.1rem);
	--aleg2-font-size-2xl: clamp(2rem, 1.45rem + 3vw, 4rem);
	--aleg2-font-size-hero: clamp(3rem, 1.8rem + 7vw, 8.6rem);

	/**
	 * 行高。
	 */
	--aleg2-line-height-tight: 1.08;
	--aleg2-line-height-heading: var(--aleg2-setting-line-heading, 1.18);
	--aleg2-line-height-body: var(--aleg2-setting-line-body, 1.8);

	/**
	 * 既存互換：
	 * 旧PHP出力名もCSS内で参照できるように意味を揃えます。
	 */
	--aleg2-line-heading: var(--aleg2-line-height-heading);
	--aleg2-line-body: var(--aleg2-line-height-body);

	/**
	 * 字間。
	 */
	--aleg2-letter-spacing-tight: -0.04em;
	--aleg2-letter-spacing-wide: var(--aleg2-setting-letter-heading, 0.08em);
	--aleg2-letter-spacing-wider: 0.18em;
	--aleg2-letter-heading: var(--aleg2-letter-spacing-wide);

	/* ---------------------------------------------
	 * Layout
	 * ---------------------------------------------
	 *
	 * 設計：
	 * - design.layout.max_width / wide_width はcontainerの上限として使います。
	 * - page_side / section_y は固定値にしすぎず、clampでレスポンシブ性を維持します。
	 */

	--aleg2-container-xs: 760px;
	--aleg2-container-sm: 960px;
	--aleg2-container-md: 1120px;

	/**
	 * 通常・広幅container。
	 *
	 * 既存の lg / xl 名は維持しながら、max / wide も追加します。
	 */
	--aleg2-container-max: var(--aleg2-setting-layout-max, 1280px);
	--aleg2-container-wide: var(--aleg2-setting-layout-wide, 1440px);
	--aleg2-container-lg: var(--aleg2-container-max);
	--aleg2-container-xl: var(--aleg2-container-wide);

	/**
	 * 横余白。
	 *
	 * setting値は最大値・基準値として使い、スマホではclampで自然に縮めます。
	 */
	--aleg2-container-padding: clamp(16px, 4vw, var(--aleg2-setting-page-side, 64px));

	/**
	 * section上下余白。
	 *
	 * setting値を上限として使いながら、レスポンシブを維持します。
	 */
	--aleg2-section-padding-y: clamp(56px, 10vw, var(--aleg2-setting-section-y, 160px));
	--aleg2-section-padding-y-sm: clamp(40px, 7vw, var(--aleg2-setting-section-y-sm, 104px));

	/**
	 * header高さ。
	 *
	 * header / anchor offset / hero補正で使います。
	 */
	--aleg2-header-height: var(--aleg2-setting-header-height, 76px);

	/**
	 * 既存互換：
	 * 旧PHP出力・旧CSS参照名を維持します。
	 */
	--aleg2-layout-max: var(--aleg2-container-max);
	--aleg2-layout-wide: var(--aleg2-container-wide);
	--aleg2-page-side: var(--aleg2-setting-page-side, 24px);
	--aleg2-layout-page-side: var(--aleg2-page-side);
	--aleg2-section-y: var(--aleg2-section-padding-y);
	--aleg2-section-y-sm: var(--aleg2-section-padding-y-sm);

	/* ---------------------------------------------
	 * Spacing
	 * ---------------------------------------------
	 *
	 * 汎用spacingは従来値を維持します。
	 * 個別のlayout設定とは役割を分け、コンポーネント内余白に使います。
	 */
	--aleg2-space-1: 4px;
	--aleg2-space-2: 8px;
	--aleg2-space-3: 12px;
	--aleg2-space-4: 16px;
	--aleg2-space-5: 20px;
	--aleg2-space-6: 24px;
	--aleg2-space-8: 32px;
	--aleg2-space-10: 40px;
	--aleg2-space-12: 48px;
	--aleg2-space-16: 64px;
	--aleg2-space-20: 80px;
	--aleg2-space-24: 96px;

	/* ---------------------------------------------
	 * Shape
	 * ---------------------------------------------
	 *
	 * 設計：
	 * - 抽象的な xs〜xl は既存互換として維持します。
	 * - card / media / button / panel はDesign設定由来の用途別radiusです。
	 */

	--aleg2-radius-xs: 6px;
	--aleg2-radius-sm: 10px;
	--aleg2-radius-md: 16px;
	--aleg2-radius-lg: var(--aleg2-setting-radius-card, 24px);
	--aleg2-radius-xl: var(--aleg2-setting-radius-panel, 36px);
	--aleg2-radius-pill: var(--aleg2-setting-radius-button, 999px);

	/**
	 * 用途別radius。
	 */
	--aleg2-radius-card: var(--aleg2-setting-radius-card, var(--aleg2-radius-lg));
	--aleg2-radius-media: var(--aleg2-setting-radius-media, 18px);
	--aleg2-radius-button: var(--aleg2-setting-radius-button, var(--aleg2-radius-pill));
	--aleg2-radius-panel: var(--aleg2-setting-radius-panel, var(--aleg2-radius-xl));

	/**
	 * フォーム入力欄用radius。
	 *
	 * PHP側の inc/design/css-vars.php は、管理画面の入力欄角丸設定を
	 * --aleg2-setting-radius-input / --aleg2-setting-radius-textarea として出力します。
	 * Contactだけでfallbackを書くと、検索フォーム・コメントフォーム・会員フォームなどへ
	 * 同じ設定値を再利用できなくなるため、foundation層で正式な実使用トークンへ橋渡しします。
	 *
	 * input/select：
	 * - ボタンがピル型でも、単行入力欄は過剰に丸くなりすぎないよう専用値を優先します。
	 *
	 * textarea：
	 * - 複数行入力欄はカード寄りの角丸をfallbackにして、読みやすい面として扱います。
	 */
	--aleg2-radius-input: var(--aleg2-setting-radius-input, var(--aleg2-radius-button));
	--aleg2-radius-textarea: var(--aleg2-setting-radius-textarea, var(--aleg2-radius-card));

	/* ---------------------------------------------
	 * Shadows / Effects
	 * ---------------------------------------------
	 *
	 * 設計：
	 * - shadow.card / panel / soft を用途別tokenへ接続します。
	 * - 既存の soft / strong / glow は維持します。
	 */

	--aleg2-shadow-card: var(--aleg2-setting-shadow-card, 0 24px 80px rgba(0, 0, 0, 0.28));
	--aleg2-shadow-panel: var(--aleg2-setting-shadow-panel, 0 18px 60px rgba(0, 0, 0, 0.22));
	--aleg2-shadow-soft: var(--aleg2-setting-shadow-soft, 0 16px 50px rgba(0, 0, 0, 0.28));

	/**
	 * カード操作時の安全表示域。
	 *
	 * カード本体は hover / focus-within で上方向へ移動するため、
	 * 親のgrid・carousel・Splide trackがタイトなままだと枠線や影が切れます。
	 * 個別セクションで場当たり的にheightを増やすのではなく、
	 * hover量 + 枠線/影の逃げ代を共通tokenとして定義します。
	 *
	 * --aleg2-card-hover-lift は inc/design/css-vars.php が出力する値です。
	 * 未出力環境でも破綻しないよう、fallbackとして4pxを持たせます。
	 */
	--aleg2-card-interaction-safe-space: calc(var(--aleg2-card-hover-lift, 4px) + 3px);

	/**
	 * 既存互換：
	 * strongはpanelに寄せます。
	 */
	--aleg2-shadow-strong: var(--aleg2-shadow-panel);

	/**
	 * glow shadow。
	 *
	 * 色はsemantic glow tokenを参照します。
	 */
	--aleg2-shadow-glow-primary: 0 0 42px var(--aleg2-glow-primary);
	--aleg2-shadow-glow-secondary: 0 0 46px var(--aleg2-glow-secondary);

	--aleg2-blur-glass: blur(18px);
	--aleg2-backdrop-glass: saturate(1.25) blur(18px);

	/* ---------------------------------------------
	 * Button Tokens
	 * ---------------------------------------------
	 *
	 * design.buttons.* をCSSから扱うための共通tokenです。
	 * style / hover_lift のON/OFFはbody classでも制御します。
	 */

	--aleg2-button-hover-amount: var(--aleg2-setting-button-hover-amount, 3px);
	--aleg2-button-hover-lift: var(--aleg2-setting-button-hover-lift, 1);
	--aleg2-button-bg: var(--aleg2-color-primary);
	--aleg2-button-color: var(--aleg2-color-on-primary);
	--aleg2-button-border: var(--aleg2-color-primary);
	--aleg2-button-bg-hover: var(--aleg2-color-link-hover);
	--aleg2-button-color-hover: var(--aleg2-color-on-primary);

	/* ---------------------------------------------
	 * Background Effect Tokens
	 * ---------------------------------------------
	 *
	 * PHP側の design.background.* から 1 / 0 が入ります。
	 * 実際のON/OFFは body class 側でも制御します。
	 */

	--aleg2-bg-grain: var(--aleg2-setting-bg-grain, 1);
	--aleg2-bg-vignette: var(--aleg2-setting-bg-vignette, 1);
	--aleg2-bg-glow: var(--aleg2-setting-bg-glow, 1);
	--aleg2-bg-grid-lines: var(--aleg2-setting-bg-grid-lines, 0);

	/* ---------------------------------------------
	 * Motion
	 * ------------------------------------------ */
	--aleg2-duration-fast: var(--aleg2-motion-fast, 160ms);
	--aleg2-duration-normal: var(--aleg2-motion-normal, 320ms);
	--aleg2-duration-slow: var(--aleg2-motion-slow, 700ms);
	--aleg2-duration-hero: 1200ms;

	--aleg2-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
	--aleg2-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
	--aleg2-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	/* ---------------------------------------------
	 * Z-index
	 * ---------------------------------------------
	 * 画面全体を覆うUIは、個別CSSで巨大な固定値を直書きせず、
	 * このレイヤートークンを参照します。
	 *
	 * Adult Gateは本文・ヘッダー・通常モーダルより上、
	 * Loaderは初期表示演出としてAdult Gateより上に配置します。
	 * これにより、ページロード中にAdult GateがLoaderを追い抜く事故を防ぎます。
	 */
	--aleg2-z-base: 1;
	--aleg2-z-header: 80;
	--aleg2-z-drawer: 100;
	--aleg2-z-modal: 200;
	--aleg2-z-adult-gate: 999990;
	--aleg2-z-loader: 1000000;
	--aleg2-z-debug: 1000010;
}