/*
 * デザイントークン（唯一の真実）
 * ------------------------------------------------------------
 * 色・タイポ・余白・ブレークポイントはここに集約する。
 * テンプレートや main.css に生の色・px を直書きしない。
 * Figma 由来のスラッシュ命名（例 --surface/base）は kebab-case に変換し、
 * 元の Figma 命名はコメントで残す（対応を追えるように）。
 *
 * ↓ 以下は仮の初期値。Figma 読込後に実値へ置き換える。
 */

:root {
	/* === Color（Figma 変数より確定。これが色の真実） === */
	--color-text: #393229;          /* Figma: text */
	--color-accent: #01ab96;        /* Figma: アクセントカラー / サブタイトル（緑） */
	--color-nav: #edc067;           /* Figma: nav（黄） */
	--color-bg-service: #fbf6f0;    /* Figma: background_service */
	--color-bg-artist: #f4e8d9;     /* Figma: background_artist */
	--color-bg-warm: #fcb797;       /* Figma: bg_dbrec, company（オレンジ） */
	--color-bg-label: #cfe3e2;      /* Figma: bg_label（淡teal。SERVICE LABEL背景blob） */
	--color-bg-yellow: #f3e3a1;     /* 旧: Dig in! 背景の淡黄近似。現在は雲形PNG(blob/digin.png)で実色描画のため未使用・参考保持 */
	--color-recruit: #71c8c3;       /* RECRUIT の淡teal。Figma Export(RECRUIT & COMPANY 254:420)の丸ボタン塗りを実測 */
	--color-bg-company-band: #e2eeee; /* COMPANY 会社概要/アクセスの淡teal帯 ≒ TOP recruit地。Figma "background" 実測(#e1eeed/#e2eeee) */
	--color-bg-fv: var(--color-bg-company-band); /* TOP FV 地の淡水色 #e2eeee。Figma "background" と同値（254:291 突合・透過フレームのため値はデザイナー確定値 #E2EEEE） */
	--color-button: #e58b6b;        /* Figma "button"（コーラル）。ARTIST の VIEW MORE 等。teal の heading,button(=--color-accent)とは別 */
	--color-surface-base: #fff;

	/* セマンティック別名（テンプレート / main.css が参照する） */
	--color-text-primary: var(--color-text);
	--color-text-muted: #6b6258;    /* 暫定: Figma 未確定。実装時に確認 */
	--color-surface-subtle: var(--color-bg-service);
	--color-border: #e6ddd2;        /* 暫定: Figma 未確定。実装時に確認 */
	--color-brand-primary: var(--color-accent);

	/* === Typography（Figma 確定: 和文 Zen Kaku Gothic New / 欧文 Futura） === */
	--font-base: "Zen Kaku Gothic New", system-ui, sans-serif;

	/* 欧文(コピーライト等)。Futura は Web 無料配布が無いためライセンス要確認。暫定フォールバック付き */
	--font-en: "Inter", system-ui, sans-serif; /* 英字見出し。Figma実機=Inter（旧Futuraは未配布） */
	--font-size-base: 16px;
	--line-height-base: 1.8;
	--letter-spacing-base: 0.05em; /* Figma: tracking 0.8px @16px ≒ 0.05em */
	--font-weight-normal: 400;
	--font-weight-medium: 500; /* Figma: Medium */
	--font-weight-bold: 700;   /* Figma: Bold */

	/* === Spacing（8px グリッド想定。要 Figma 確認） === */
	--space-2xs: 4px;
	--space-xs: 8px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-nav: 32px;   /* Figma: グローバルナビ項目間 */
	--space-lg: 40px;    /* Figma: ピル内テキスト群とメールの間 */
	--space-pill: 48px;  /* Figma: ピル左右 padding */
	--space-xl: 64px;
	--space-2xl: 96px;

	/* === Layout === */
	--content-max-width: 1352px; /* Figma実測: 1512フレームで左右80px → content 1352px */
	--content-gutter: 24px;

	/* === Breakpoints（値は --bp-* 参照用。実 @media には数値を使う） === */
	--bp-sp: 767px;
	--bp-tablet: 1024px;

	/* === Motion（全ページ共通のホバー演出。「ふわっと」=opacity を 0.4s でフェード） === */
	--transition-hover: opacity 0.4s ease;
}

/* PC幅では左右余白を広げて余裕を持たせる（SP は 24px のまま）。
   全コンテナが width:min(100% - 2*gutter, max-width) で参照するため一括で効く。
   Figma実測: 1512フレームで左右80px → 1512px 以上では自動的に 80px へ広がる。 */
@media (min-width: 768px) {
	:root {
		--content-gutter: 48px;
	}
}