/*
 * AWLL: トーン B（完全モノクロ）の追加スタイル
 *
 * redesign.css はビルド済み（minify 済み Tailwind）で、新しいクラスを足しても効かない。
 * ボタン・暗い面・見出しラベルなど、トーン B で増えた部品はここに書く。
 * 色は Radix Colors gray（light / dark）の12段階の用途どおりに割り当てる。
 *   light: 1 #fcfcfc / 2 #f9f9f9 / 3 #f0f0f0 / 6 #d9d9d9 / 7 #cecece / 11 #646464 / 12 #202020
 *   dark : 1 #111111 / 2 #191919 / 6 #3a3a3a / 11 #b4b4b4 / 12 #eeeeee
 */

/* ------------------------------------------------------------
 * 暗い面（ヘッダー・フッター・暗いセクション）
 * Tailwind のクラスは var(--accent) などを使う側で解決するので、
 * 暗い面の要素でトークンを差し替えると中の text-accent / bg-accent も明るい側に切り替わる。
 * ------------------------------------------------------------ */
.awll-on-dark {
	--foreground: #eeeeee;
	--muted-foreground: #b4b4b4;
	--accent: #eeeeee;
	--accent-foreground: #111111;
	--border: #3a3a3a;
	--input: #3a3a3a;
	--ring: #b4b4b4;
}

/* セクション見出しの英字ラベル（旧 text-gold） */
.awll-eyebrow {
	color: #202020;
	letter-spacing: 0.16em;
}
.awll-on-dark .awll-eyebrow {
	color: #b4b4b4;
}

/* ------------------------------------------------------------
 * ボタン（共通）
 * 角丸 2px・1.5px の線。ホバーで塗りと線が入れ替わり、矢印が 4px 右へ動く。
 * ------------------------------------------------------------ */
.awll-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 0.8125rem 1.6875rem;
	border: 1.5px solid #202020;
	border-radius: 2px;
	background-color: #202020;
	color: #ffffff;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.awll-btn:focus-visible {
	outline: 2px solid #202020;
	outline-offset: 3px;
}
.awll-btn__arrow {
	flex-shrink: 0;
	width: 22px;
	height: 14px;
	transition: transform 0.15s ease;
}
.awll-btn:hover .awll-btn__arrow {
	transform: translateX(4px);
}
.awll-btn:hover .awll-btn__arrow--back {
	transform: translateX(-4px);
}

/* 明るい背景: 黒塗り → ホバーで白地に黒線・黒文字 */
.awll-btn--solid:hover {
	background-color: #ffffff;
	border-color: #202020;
	color: #202020;
}

/* 明るい背景: 白地に黒線 → ホバーで黒塗り */
.awll-btn--outline {
	background-color: transparent;
	color: #202020;
}
.awll-btn--outline:hover {
	background-color: #202020;
	border-color: #202020;
	color: #ffffff;
}

/* 暗い背景: 明るい塗り（#eeeeee・#111111 文字） → ホバーで線だけ */
.awll-btn--inverse {
	border-color: #eeeeee;
	background-color: #eeeeee;
	color: #111111;
}
.awll-btn--inverse:hover {
	border-color: #eeeeee;
	background-color: transparent;
	color: #eeeeee;
}

/* 暗い背景: 線だけ → ホバーで明るい塗り */
.awll-btn--ghost-inverse {
	border-color: #eeeeee;
	background-color: transparent;
	color: #eeeeee;
}
.awll-btn--ghost-inverse:hover {
	border-color: #eeeeee;
	background-color: #eeeeee;
	color: #111111;
}

.awll-on-dark .awll-btn:focus-visible,
.awll-btn--inverse:focus-visible,
.awll-btn--ghost-inverse:focus-visible {
	outline-color: #eeeeee;
}

/* ------------------------------------------------------------
 * 矢印つきテキストリンク（「一覧へ」「詳しく見る」）
 * ------------------------------------------------------------ */
.awll-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--accent);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	text-underline-offset: 4px;
}
.awll-link-arrow:hover {
	text-decoration: underline;
}
.awll-link-arrow .awll-btn__arrow {
	transition: transform 0.15s ease;
}
.awll-link-arrow:hover .awll-btn__arrow {
	transform: translateX(4px);
}

/* ------------------------------------------------------------
 * 暗い面の上に置く白いカード（お知らせ）
 * .awll-on-dark はトークンを明るい側へ差し替えるので、白いカードの中だけ
 * 明るい面用の値（gray 12 / 11 / 6）に戻す。戻さないと白地に #b4b4b4 の文字になる。
 * 影は暗い面では見えないため濃くする。
 * ------------------------------------------------------------ */
.awll-on-dark .awll-card,
.awll-on-dark .awll-note-empty {
	--foreground: #202020;
	--card-foreground: #202020;
	--muted-foreground: #646464;
	--accent: #202020;
	--accent-foreground: #fcfcfc;
	--border: #d9d9d9;
}
.awll-on-dark .awll-card:hover {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}