/* ==========================================================================
   NOIR GOLD - デザイントークン
   色・書体・余白・モーションの単一の真実。
   ========================================================================== */

:root {
	/* ---- 色 ------------------------------------------------------------ */
	--c-bg: #0a0a0a;          /* 漆黒 */
	--c-bg-2: #101010;        /* セクション交互 */
	--c-bg-3: #16130f;        /* カード面 */
	--c-bg-4: #1d1810;        /* ホバー面 */

	/* 純白は使わない。わずかに温度を落とすと紙のように見える */
	--c-ink: #ede9e1;         /* 本文  16.3:1 */
	--c-ink-dim: #a9a49a;     /* 補助   7.9:1 */
	--c-ink-faint: #6f6a61;   /* 装飾   3.6:1（装飾専用・本文には使わない） */

	--c-gold: #c9a227;        /* 見出し・罫線  8.2:1 */
	--c-gold-lt: #f0e0a8;
	--c-gold-dk: #7a5f14;

	/* 差し色。舞台の緞帳の赤。
	   使いどころは「行動」と「注意」に限定する
	   ── CTA、必須バッジ、エラー、ローダーの幕。ここを広げると品位が落ちる */
	--c-crimson: #8b1e2d;
	--c-crimson-lt: #b4303f;
	--c-crimson-dk: #4e0e19;
	--g-crimson: linear-gradient(150deg, #4e0e19 0%, #8b1e2d 42%, #a82838 58%, #5c1220 100%);

	--c-line: rgba(201, 162, 39, 0.26);
	--c-line-soft: rgba(201, 162, 39, 0.12);
	--c-line-ink: rgba(237, 233, 225, 0.12);
	--c-line-crimson: rgba(180, 48, 63, 0.4);

	/* 金は「面」ではなく「線」と「文字」にだけ使う。ベタ塗りは一気に安く見える */
	--g-gold: linear-gradient(
		100deg,
		#7a5f14 0%,
		#c9a227 20%,
		#f5e9be 44%,
		#e7c96b 56%,
		#c9a227 72%,
		#6e5511 100%
	);
	--g-rule: linear-gradient(90deg, transparent, var(--c-gold) 18%, var(--c-gold) 82%, transparent);
	--g-veil: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.72) 62%, var(--c-bg) 100%);

	/* ---- 書体 ---------------------------------------------------------- */
	--ff-display: "Cormorant Garamond", "Times New Roman", serif;
	--ff-mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
	--ff-gothic: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

	--fs-hero: clamp(2.5rem, 7.2vw, 6.75rem);
	--fs-h1: clamp(2rem, 4.6vw, 4rem);
	--fs-h2: clamp(1.625rem, 3.4vw, 3rem);
	--fs-h3: clamp(1.125rem, 1.6vw, 1.5rem);
	--fs-body: clamp(0.9375rem, 0.35vw + 0.875rem, 1.0625rem);
	--fs-small: clamp(0.75rem, 0.2vw + 0.7rem, 0.8125rem);

	--ls-label: 0.32em;   /* セクションラベル */
	--ls-display: 0.06em; /* 大見出し */
	--ls-body: 0.04em;    /* 和文本文 */

	--lh-body: 2.05;      /* 詰まった和文は一瞬で安く見える */
	--lh-tight: 1.24;

	/* ---- 余白 ---------------------------------------------------------- */
	/* 「高い」の半分は余白の絶対量で決まる */
	--sp-section: clamp(96px, 13vw, 200px);
	--sp-block: clamp(40px, 5vw, 80px);
	--gutter: clamp(20px, 5vw, 64px);
	--wrap: 1320px;
	--wrap-narrow: 780px;

	/* ---- モーション ------------------------------------------------------ */
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur: 0.9s;
	--dur-fast: 0.45s;
	--stagger: 70ms;

	/* ローディングの緞帳が上がりきるまで。
	   JS はこの値を読んで待ち時間とカウンターの速度を合わせるので、
	   長さを変えるときはここだけ触れば済む。 */
	--loader-dur: 2.4s;

	/* ---- その他 --------------------------------------------------------- */
	--header-h: 78px;
	--z-grain: 90;
	--z-header: 100;
	--z-cursor: 200;
	--z-loader: 300;
}

@media (max-width: 768px) {
	:root {
		--header-h: 62px;
		--lh-body: 1.95;
	}
}