/**
 * css/components/button.css
 * ============================================================
 * A LEGEND 2：Button Component
 * ============================================================
 *
 * 役割：
 * - template-parts/components/button.php で出力される共通ボタンを装飾します。
 * - primary / ghost / text の3種類を基本に、全体のデザイントークンと連携します。
 *
 * 今回の改修：
 * - 固定文字色 #061018 を --aleg2-color-on-primary へ置換します。
 * - 固定白半透明背景を --aleg2-glass-bg / --aleg2-glass-bg-strong へ置換します。
 * - 角丸を design.radius.button 由来の --aleg2-radius-button へ接続します。
 * - hover移動量を design.buttons.hover_amount 由来の --aleg2-button-hover-amount へ接続します。
 * - design.buttons.hover_lift がONの時だけボタンを持ち上げます。
 * - design.buttons.style に対応する body class
 *   .aleg2-buttons-solid / .aleg2-buttons-glass / .aleg2-buttons-outline を受けます。
 * - 既存の .aleg2-button / --primary / --ghost / --text / 子要素クラスは維持します。
 */

/* ------------------------------------------------------------
 * Base button
 * ------------------------------------------------------------
 *
 * すべての共通ボタンの基礎です。
 *
 * 重要：
 * - 具体的な背景・枠線はmodifierまたはbody class側で決めます。
 * - radiusは --aleg2-radius-button を使い、Design設定へ追従させます。
 * - hover transformはここでは直接発火させず、
 *   body.aleg2-buttons-hover-lift 経由でON/OFFします。
 */
.aleg2-button {
	position: relative;
	display: inline-flex;
	gap: var(--aleg2-space-3);
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.85em 1.35em;
	overflow: hidden;
	color: var(--aleg2-color-text);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-sm);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-decoration: none;
	text-transform: uppercase;
	border: 1px solid transparent;
	border-radius: var(--aleg2-radius-button);
	transition:
		color var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		border-color var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		background var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		opacity var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

/**
 * hover用の内側レイヤー。
 *
 * 既存構造を維持します。
 * modifierごとに背景を差し替え、hover時にopacityを上げます。
 */
.aleg2-button::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	opacity: 0;
	transition: opacity var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

.aleg2-button:hover {
	color: var(--aleg2-color-text);
	text-decoration: none;
}

/**
 * hover lift。
 *
 * 旧コードでは常に translateY(-2px) でした。
 * 今回は design.buttons.hover_lift が有効な時だけbody classが付き、
 * 移動量は --aleg2-button-hover-amount を使います。
 */
body.aleg2-buttons-hover-lift .aleg2-button:hover {
	transform: translate3d(0, calc(var(--aleg2-button-hover-amount) * -1), 0);
}

.aleg2-button:hover::before {
	opacity: 1;
}

/**
 * キーボード操作時のフォーカス表示。
 *
 * outlineを消して終わりにせず、共通focus ringを使います。
 */
.aleg2-button:focus-visible {
	outline: none;
	box-shadow:
		var(--aleg2-shadow-soft),
		var(--aleg2-focus-ring);
}

.aleg2-button__label,
.aleg2-button__icon {
	position: relative;
	z-index: 1;
}

.aleg2-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.2em;
	height: 1.2em;
	transition: transform var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

.aleg2-button:hover .aleg2-button__icon {
	transform: translate3d(4px, 0, 0);
}

/* ------------------------------------------------------------
 * Primary button
 * ------------------------------------------------------------
 *
 * primaryはメインCTAです。
 *
 * 旧コード：
 * - color: #061018;
 *
 * 改修後：
 * - color: var(--aleg2-color-on-primary);
 * - 背景は primary / secondary のDesign Tokenを使います。
 */
.aleg2-button--primary {
	color: var(--aleg2-color-on-primary);
	background:
		linear-gradient(
			135deg,
			var(--aleg2-color-primary),
			var(--aleg2-color-secondary)
		);
	border-color: transparent;
	box-shadow: var(--aleg2-shadow-glow-primary);
}

.aleg2-button--primary::before {
	background:
		linear-gradient(
			135deg,
			var(--aleg2-color-accent),
			var(--aleg2-color-primary)
		);
}

.aleg2-button--primary:hover {
	color: var(--aleg2-color-on-primary);
	box-shadow: var(--aleg2-shadow-glow-secondary);
}

/* ------------------------------------------------------------
 * Ghost button
 * ------------------------------------------------------------
 *
 * ghostはガラス調ボタンです。
 *
 * 旧コード：
 * - rgba(255, 255, 255, 0.04)
 * - rgba(255, 255, 255, 0.08)
 *
 * 改修後：
 * - glass / surface / border tokenへ接続します。
 */
.aleg2-button--ghost {
	color: var(--aleg2-color-text);
	background: var(--aleg2-glass-bg);
	border-color: var(--aleg2-color-border);
	backdrop-filter: var(--aleg2-backdrop-glass);
}

.aleg2-button--ghost::before {
	background: var(--aleg2-glass-bg-strong);
}

.aleg2-button--ghost:hover {
	color: var(--aleg2-color-heading);
	border-color: var(--aleg2-color-primary);
	box-shadow: var(--aleg2-shadow-soft);
}

/* ------------------------------------------------------------
 * Text button
 * ------------------------------------------------------------
 *
 * textは背景なしのリンク風ボタンです。
 *
 * 既存の min-height / padding / border を維持しつつ、
 * 色は link / link-hover tokenへ接続します。
 */
.aleg2-button--text {
	min-height: auto;
	padding: 0;
	color: var(--aleg2-color-link);
	background: transparent;
	border: 0;
	border-radius: 0;
}

.aleg2-button--text::before {
	display: none;
}

.aleg2-button--text:hover {
	color: var(--aleg2-color-link-hover);
	box-shadow: none;
	transform: none;
}

/* ------------------------------------------------------------
 * Global button style: solid
 * ------------------------------------------------------------
 *
 * design.buttons.style = solid の時に body へ .aleg2-buttons-solid が付きます。
 *
 * solidは既存のprimary/ghost/textの役割を大きく変えず、
 * primaryを強いCTA、ghostを控えめCTAとして扱います。
 */
body.aleg2-buttons-solid .aleg2-button--primary {
	color: var(--aleg2-color-on-primary);
	background:
		linear-gradient(
			135deg,
			var(--aleg2-color-primary),
			var(--aleg2-color-secondary)
		);
	border-color: transparent;
}

body.aleg2-buttons-solid .aleg2-button--ghost {
	color: var(--aleg2-color-text);
	background: var(--aleg2-glass-bg);
	border-color: var(--aleg2-color-border);
}

/* ------------------------------------------------------------
 * Global button style: glass
 * ------------------------------------------------------------
 *
 * design.buttons.style = glass の時に body へ .aleg2-buttons-glass が付きます。
 *
 * primaryも完全な塗りではなく、ガラス面 + primary枠へ寄せます。
 * ライト系プリセットでも重くなりにくい見た目になります。
 */
body.aleg2-buttons-glass .aleg2-button--primary {
	color: var(--aleg2-color-heading);
	background:
		linear-gradient(
			135deg,
			var(--aleg2-glass-bg-strong),
			var(--aleg2-glass-bg)
		);
	border-color: var(--aleg2-color-primary);
	box-shadow: var(--aleg2-shadow-soft);
	backdrop-filter: var(--aleg2-backdrop-glass);
}

body.aleg2-buttons-glass .aleg2-button--primary::before {
	background:
		linear-gradient(
			135deg,
			var(--aleg2-color-primary),
			var(--aleg2-color-secondary)
		);
}

body.aleg2-buttons-glass .aleg2-button--primary:hover {
	color: var(--aleg2-color-on-primary);
	border-color: var(--aleg2-color-primary);
	box-shadow: var(--aleg2-shadow-glow-primary);
}

body.aleg2-buttons-glass .aleg2-button--ghost {
	color: var(--aleg2-color-text);
	background: var(--aleg2-glass-bg);
	border-color: var(--aleg2-color-border);
	backdrop-filter: var(--aleg2-backdrop-glass);
}

/* ------------------------------------------------------------
 * Global button style: outline
 * ------------------------------------------------------------
 *
 * design.buttons.style = outline の時に body へ .aleg2-buttons-outline が付きます。
 *
 * primaryも塗りつぶしではなく線主体にし、
 * hover時だけprimary背景へ反転します。
 */
body.aleg2-buttons-outline .aleg2-button--primary {
	color: var(--aleg2-color-primary);
	background: transparent;
	border-color: var(--aleg2-color-primary);
	box-shadow: none;
}

body.aleg2-buttons-outline .aleg2-button--primary::before {
	background: var(--aleg2-color-primary);
}

body.aleg2-buttons-outline .aleg2-button--primary:hover {
	color: var(--aleg2-color-on-primary);
	border-color: var(--aleg2-color-primary);
	box-shadow: var(--aleg2-shadow-soft);
}

body.aleg2-buttons-outline .aleg2-button--ghost {
	color: var(--aleg2-color-text);
	background: transparent;
	border-color: var(--aleg2-color-border);
}

body.aleg2-buttons-outline .aleg2-button--ghost::before {
	background: var(--aleg2-glass-bg);
}

body.aleg2-buttons-outline .aleg2-button--ghost:hover {
	color: var(--aleg2-color-primary);
	border-color: var(--aleg2-color-primary);
}

/* ------------------------------------------------------------
 * Disabled state
 * ------------------------------------------------------------
 *
 * aタグ/buttonタグの両方に対応します。
 * 既存HTMLへ影響しない補助状態です。
 */
.aleg2-button[aria-disabled="true"],
.aleg2-button:disabled {
	cursor: not-allowed;
	opacity: 0.52;
	pointer-events: none;
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------
 *
 * 既存のスマホ時全幅指定を維持します。
 */
@media (max-width: 640px) {
	.aleg2-button {
		width: 100%;
		min-height: 46px;
	}
}