/**
 * デザイントークン（CSS変数）
 * design/フォルダのモックアップ配色・フォントに準拠。値を変えると全ページに反映される。
 */

:root {
	/* ===== カラー ===== */
	--color-ink: #080808;
	--color-muted: #8d8d8d;
	--color-muted-soft: rgba(8, 8, 8, 0.55);
	--color-white: #ffffff;
	--color-fog: #f3f3f0;
	--color-border: rgba(8, 8, 8, 0.15);
	--color-border-strong: #8d8d8d;

	/* ===== フォント ===== */
	--font-main: 'Archivo', sans-serif;

	/* ===== フォントサイズ ===== */
	--fs-hero: clamp(3.25rem, 10vw, 9.375rem);
	--fs-section-en: clamp(2.5rem, 7vw, 6rem);
	--fs-jp-head: clamp(1.125rem, 1.6vw, 1.625rem);
	--fs-body: clamp(0.875rem, 1vw, 1rem);
	--fs-label: 0.6875rem;

	/* ===== レイアウト ===== */
	--container-max: 1440px;
	--section-padding: clamp(4rem, 10vw, 10rem) clamp(1.5rem, 5vw, 5rem);
	--section-padding-tight: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 5rem);

	/* ===== 余白 ===== */
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1.25rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 6rem;

	/* ===== その他 ===== */
	--transition-base: 0.3s ease;
	--transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	--header-height: 76px;
}

/* ===== 管理画面用トークン（ブランドを踏襲しつつ操作性を優先） ===== */
:root {
	--admin-bg: #f6f6f4;
	--admin-sidebar: #0c0c0c;
	--admin-sidebar-fg: rgba(255, 255, 255, 0.7);
	--admin-sidebar-fg-active: #ffffff;
	--admin-card: #ffffff;
	--admin-accent: #080808;
	--admin-danger: #b23b2e;
	--admin-success: #2e7d32;
	--admin-radius: 10px;
}