/*
 * DOG FIRST RESORT — 共通デザイントークン
 *
 * 出典：モバイルデザインイメージ（確定版）2026-08-28 ／ D-C00 共通モバイルデザインルール
 *
 * 支給素材のうち、ぼかしグラデーションと角グラデーションは CSS で再現している。
 * 元データは 4738×4450 と 500×500 の PNG を SVG で包んだもので、
 * 2点で 3.8MB あった。中身は単色から白へ滲むだけの図形のため、
 * 画像として読み込む理由がない。CSS なら 0 バイトで、拡大にも強い。
 *
 * 金箔調の粒子だけは CSS で再現できないため画像を使う。
 * ただし支給された 4 点は同一ファイルだったので 1 点に統合し、
 * 4.2MB の SVG から 159KB の WebP に置き換えている。
 */

:root {
	/* ── 背景 ── */
	--df-white:   #FFFFFF;   /* ピュアホワイト：ページ全体の基本 */
	--df-beige:   #FAF8F3;   /* ベースベージュ：情報をまとめる部分に限定 */
	--df-ivory:   #F6F5F2;   /* アイボリー：カード・情報枠・フッター周辺 */

	/* ── テーマカラー ── */
	--df-brass:   #C7B183;   /* 真鍮ゴールド：細いライン・小さな区切り */
	--df-taupe:   #97886B;   /* ディープトープ：英語見出し・補助見出し */
	--df-sage:    #B6C9AE;   /* ライトセージグリーン：予約 CTA */

	/* ── 文字 ── */
	--df-title:   #2E2C2B;   /* 大タイトル・日本語主要見出し */
	--df-body:    #555756;   /* 本文・説明文 */
	--df-paw:     #F3EDE0;   /* 肉球 */

	/* ── グラデーションの構成色 ── */
	--df-gold-deep:  #C6AF72;  /* グラデーション A の濃い側 */
	--df-gold-pale:  #E2D99C;  /* グラデーション B の淡い側 */
	--df-gold-light: #FCC873;  /* 両方に共通する明るい側 */
	--df-gold-core:  #E7C870;  /* 支給素材 4.svg の最も濃い部分を実測した値 */

	/* ── 余白 ── */
	--df-gap-1:  8px;
	--df-gap-2: 14px;
	--df-gap-3: 22px;
	--df-gap-4: 34px;
	--df-gap-5: 52px;   /* セクション内 */
	--df-gap-6: 80px;   /* セクション間。同一セクション内より必ず広く取る */
}

/* ------------------------------------------------------------------
 * グラデーション
 *
 * D-C00 の指定：輪郭のはっきりした帯や色面にせず、
 * 金色の光が白い背景の中へぼんやりとにじむ表現にすること。
 * ページ全体に占める面積は約 10％ に抑えること。
 * ---------------------------------------------------------------- */

/* ぼかしグラデーション（支給素材 1.svg・8.svg の置き換え） */
.df-glow {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--df-gold-deep) 62%, transparent) 0%,
		color-mix(in srgb, var(--df-gold-light) 34%, transparent) 38%,
		transparent 72%
	);
	filter: blur(18px);
}

/* 淡い側（グラデーション B） */
.df-glow--pale {
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--df-gold-pale) 58%, transparent) 0%,
		color-mix(in srgb, var(--df-gold-light) 30%, transparent) 40%,
		transparent 74%
	);
}

/*
 * 角から差し込むグラデーション（支給素材 4.svg・13.svg の置き換え）
 *
 * 支給素材の最も濃い部分を実測すると #E7C870 だった。茶色ではなく明るいゴールドで、
 * その濃さが一定の範囲で保たれてから白へ抜けていく。
 * 濃い側の #C6AF72 を起点にすると茶色に寄り、明るい側の #FCC873 だけでは薄くなる。
 * そこで実測値そのものを核に据え、そこから淡いゴールドへ送っている。
 *
 * ぼかしは 8px。これ以上強めると核が拡散して、支給素材よりゴールド感が弱くなる。
 */
.df-corner {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		to bottom right,
		var(--df-gold-core) 0%,
		color-mix(in srgb, var(--df-gold-core) 94%, transparent) 26%,
		color-mix(in srgb, var(--df-gold-pale) 50%, transparent) 42%,
		color-mix(in srgb, var(--df-gold-pale) 16%, transparent) 58%,
		transparent 76%
	);
	filter: blur(8px);
}

/*
 * 金箔調の粒子。
 *
 * 粒の散らばりは CSS で作れないため、ここだけ画像を使う。
 * 素材は白地に描かれているので、乗算で重ねて白を飛ばす。
 * D-C00 のとおり金箔は白い背景の上にしか置かないため、これで足りる。
 * 写真の上に重ねたい箇所が出てきた場合は、別途アルファ付きの版を作る。
 */
.df-foil {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	background: url("./gold-leaf.webp") center / contain no-repeat;
	mix-blend-mode: multiply;
	opacity: .7;
}

/* 細いゴールドの区切り線 */
.df-rule {
	width: 34px;
	height: 1px;
	border: 0;
	margin: var(--df-gap-3) 0;
	background: var(--df-brass);
}

/* ------------------------------------------------------------------
 * 予約 CTA
 *
 * D-C00 に「CTA 内の文字は背景とのコントラストを確認し、
 * スマートフォンでも読みやすくしてください」とある。確認した結果、
 * 白文字では基準を満たさないため濃色文字にしている。詳細は報告書を参照。
 * ---------------------------------------------------------------- */
.df-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--df-gap-1);
	min-height: 48px;
	padding: 0 var(--df-gap-4);
	border-radius: 6px;
	background: var(--df-sage);
	color: var(--df-title);      /* 白ではなく濃色。7.91:1 で AA・AAA を満たす */
	font-weight: 600;
	text-decoration: none;
}

/* 肉球 */
.df-paw {
	display: block;
	color: var(--df-paw);
	pointer-events: none;
}