/*
 * Site color palette: derived tokens + component rules.
 *
 * ⚠ パレットごとの色トークンの正本は color-palettes-button-states.css（ロード順で後勝ち）と
 *   inc/color-palettes.php（レジストリ）。以前ここにあった per-palette の色キー定義は
 *   button-states.css と完全な二重定義（死宣言）だったため削除した（2026-07-20・前後computed同値実証済み）。
 * このファイルが持つのは: contrast-surface 派生トークン / リンクの役割トークン /
 *   body背景・リンク等のコンポーネント規則。選択パレットは inc/color-palettes.php が html/body に付与。
 */

html[data-tiptop-palette] {
	--tiptop-contrast-surface-bg: var(--tiptop-contrast);
	--tiptop-contrast-surface-text: var(--tiptop-base);
	--tiptop-contrast-surface-muted: color-mix(in srgb, var(--tiptop-contrast-surface-text) 72%, transparent);
	--tiptop-contrast-surface-border: color-mix(in srgb, var(--tiptop-contrast-surface-text) var(--tt-tint-soft), transparent);
	--tiptop-contrast-surface-button-bg: var(--tiptop-contrast-surface-text);
	--tiptop-contrast-surface-button-text: var(--tiptop-contrast-surface-bg);
	--tiptop-contrast-surface-button-border: var(--tiptop-contrast-surface-text);
	--tiptop-contrast-surface-button-hover-bg: transparent;
	--tiptop-contrast-surface-button-hover-text: var(--tiptop-contrast-surface-text);
	--tiptop-contrast-surface-button-hover-border: var(--tiptop-contrast-surface-text);
}

html[data-tiptop-palette] {
	--tiptop-link: var(--tiptop-contrast);
	--tiptop-link-hover: var(--tiptop-contrast);
	/* Issue #748: 本文インラインリンクだけをaccentへ戻す。カードタイトルも消費する
	 * --tiptop-link-hoverはcontrastのまま維持し、本文専用トークンへ分離して波及を防ぐ。 */
	--tiptop-body-link: var(--tiptop-accent);
	--tiptop-body-link-hover: var(--tiptop-accent);
	/* 本文リンクの下線は承認済みモックに合わせて文字色そのまま（currentColor）にする
	 * （2026-08-10・オーナー判断）。専用トークンは持たせない。
	 *
	 * 2026-08-09 は「文字色＝パレットの個性／下線＝リンクだと分かる手がかり」と役割を
	 * 分ける狙いで、下線だけ contrast 由来（--tiptop-body-link-border）にしていた。
	 * そのとき「モックの下線は accent の40%濃度」と記録していたが、モックへ実際に
	 * リンクを挿して計測すると text-decoration-color の指定が無く、下線は
	 * currentColor＝accent の100%だった。40%という前提自体が誤っていた。
	 * モックとの差分をなくす方針に従い、専用トークンを廃してモックへ揃える。
	 *
	 * 2026-08-10 追記：この形で12パレットすべての見え方を確認し、現状維持でよいという
	 * オーナー判断が出ている。同じ検討を繰り返さないため経緯を残す。
	 * 白背景に対する本文リンクのコントラスト比は
	 *   plum-noir 9.47 / luxe-night 6.76 / mono-editorial 6.31 / sumi-shu 6.06 /
	 *   violet-noir 5.28 / tech-blue 3.21 / warm-craft 3.08 / cobalt-press 2.48 /
	 *   pop-bright 1.93 / ryokan-cha 1.82 / deep-forest 1.68 / navy-blush 1.64
	 * で、accent が淡いパレットではリンクが地の文に近づく。
	 * 下線だけ contrast 由来へ戻す案も検討したが、暗色パレット（luxe-night /
	 * plum-noir / violet-noir）は contrast が背景と同じ側の色のため下線が完全に沈み
	 * （比 1.00〜1.08）、明色を直す代わりに暗色を壊すことになる。
	 * 既定は mono-editorial（6.31）でモック準拠のまま成立しているため、現状を正とする。 */
	/* ナビ専用の別トークン（2026-08-07新設）。hoverで実際に変化が要るナビ系だけを
	 * 別系統として分離する。既定は従来どおり「通常時=hover時=contrast」で変化なし＝
	 * 他パレット・イマーシブの見た目は不変。 */
	--tiptop-nav-link: var(--tiptop-contrast);
	--tiptop-nav-link-hover: var(--tiptop-contrast);
}

/* 標準モードだけ、通常時をmutedに落としてhoverでcontrastへ上げる（モックに合わせた
 * オーナー確定・2026-08-07）。イマーシブは上の既定値のまま＝変化なしを維持。 */
html[data-tiptop-palette] body.tiptop-standard-system {
	--tiptop-nav-link: var(--tiptop-muted);
	--tiptop-nav-link-hover: var(--tiptop-contrast);
}

/* Hero veil color follows the palette tone: black on dark palettes, white on light ones. Intensity follows the darkness slider (--tiptop-scene-overlay); 0 clears it in every direction. */
html:not([data-tiptop-palette-tone="dark"]) {
	--tt-scene-veil: 255 255 255;
}
html[data-tiptop-palette-tone="dark"] {
	--tt-scene-veil: 2 10 17;
}

body[class*="tiptop-palette-"] {
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--tiptop-contrast) var(--tt-tint-faint), transparent) 1px, transparent 1px),
		linear-gradient(180deg, var(--tiptop-surface) 0, var(--tiptop-base) 360px);
	background-size: 72px 72px, auto;
	color: var(--tiptop-text);
}

html[data-tiptop-palette-tone="dark"] body,
body.tiptop-palette-dark {
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--tiptop-contrast) var(--tt-tint-faint), transparent) 1px, transparent 1px),
		linear-gradient(180deg, var(--tiptop-surface-alt) 0, var(--tiptop-base) 420px);
	background-size: 72px 72px, auto;
}

/* 標準モードのbodyは無地にする（2026-08-07・オーナー指摘「CTAの下に縦線ボーダーが
 * たくさんあるのはなに？」）。上の2ルールは72px間隔の縦罫線グリッド＋上部グラデーションを
 * body背景に敷いている。従来は各セクションの背景色が全面を覆っていて見えなかったが、
 * CTAをカード化して下に余白を作った結果、フッターとの隙間でbody背景が露出して初めて見えた。
 * モックのbodyは無地（var(--tiptop-base)）なので、標準モードは装飾グリッドも上部
 * グラデーションも持たない素の面にする。イマーシブは既存の見た目を維持。 */
body.tiptop-standard-system[class*="tiptop-palette-"],
html[data-tiptop-palette-tone="dark"] body.tiptop-standard-system,
body.tiptop-standard-system.tiptop-palette-dark {
	background: var(--tiptop-base);
	background-size: auto;
}

/* var(--tt-color-danger)は固定の暗い赤（#b3261e）で暗色パレット背景ではコントラスト不足になるため、
   暗色パレットに限りtoken由来のまま明度だけ上げる（Issue #361検証時に発見） */
html[data-tiptop-palette-tone="dark"] body .wpcf7-not-valid-tip,
body.tiptop-palette-dark .wpcf7-not-valid-tip,
html[data-tiptop-palette-tone="dark"] body .tiptop-contact-form .wpcf7-acceptance a,
body.tiptop-palette-dark .tiptop-contact-form .wpcf7-acceptance a {
	color: color-mix(in srgb, var(--tt-color-danger) 55%, white 45%);
}

html[data-tiptop-palette-tone="dark"] body .wpcf7-not-valid,
body.tiptop-palette-dark .wpcf7-not-valid {
	border-color: color-mix(in srgb, var(--tt-color-danger) 55%, white 45%);
}

html[data-tiptop-palette] .site,
html[data-tiptop-palette] .site-main,
html[data-tiptop-palette] .tiptop-smooth-wrapper,
html[data-tiptop-palette] .tiptop-smooth-content,
html[data-tiptop-palette] .content-area,
html[data-tiptop-palette] .entry-content,
html[data-tiptop-palette] .tiptop-front-content {
	color: var(--tiptop-text);
}

html[data-tiptop-palette] h1,
html[data-tiptop-palette] h2,
html[data-tiptop-palette] h3,
html[data-tiptop-palette] h4,
html[data-tiptop-palette] h5,
html[data-tiptop-palette] h6,
html[data-tiptop-palette] .site-branding__title,
html[data-tiptop-palette] .entry-title,
html[data-tiptop-palette] .page-title,
html[data-tiptop-palette] .post-card__title,
html[data-tiptop-palette] .news-item__title {
	color: var(--tiptop-contrast);
}

html[data-tiptop-palette] a {
	color: var(--tiptop-link);
}

/* 下線の引き方も承認済みモックへ揃える（2026-08-10・オーナー判断）。
 * モックは text-decoration: underline に text-underline-offset: 0.2em で、
 * 文字の下端からわずかに離した下線。実サイトは border-bottom で引いていたため、
 * 行ボックスの底に付いて位置が違っていた。
 * 下線色と太さはモックが指定を持たない（currentColor / auto）ので、こちらも
 * 指定しない。モックへリンクを挿して計測し、下線が accent の100%であることを
 * 確認したうえで合わせている。 */
html[data-tiptop-palette] .entry__content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text),
html[data-tiptop-palette] .tiptop-page-content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text),
html[data-tiptop-palette] .tiptop-front-content p a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text),
html[data-tiptop-palette] .tiptop-front-content li a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text) {
	border-bottom: 0;
	color: var(--tiptop-body-link);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* フッターの反転背景では、広域リンク色より反転面の文字色を優先する。 */
html[data-tiptop-palette] .site-footer a,
html[data-tiptop-palette] .site-footer .site-social-links__link,
html[data-tiptop-palette] .site-footer__logo-link {
	color: var(--tiptop-base);
}

html[data-tiptop-palette] body.tiptop-standard-system .site-footer .site-social-links__link:hover,
html[data-tiptop-palette] body.tiptop-standard-system .site-footer .site-social-links__link:focus-visible {
	border-color: var(--tiptop-base);
	color: var(--tiptop-base);
}

/* フッターナビにもナビと同じ「通常時は控えめ→hoverで前面へ」の手応えを持たせる
 * （モックに合わせたオーナー確定・2026-08-07）。ただしフッターは反転面なので
 * contrast系（暗色）ではなく反転面派生トークンを使う——暗背景でcontrastを使うと
 * 文字が沈んで読めなくなる（scripts/check-footer-inversion.js が禁じているのも同じ理由）。 */
html[data-tiptop-palette] body.tiptop-standard-system .site-footer__nav a {
	color: var(--tiptop-contrast-surface-muted);
}

html[data-tiptop-palette] body.tiptop-standard-system .site-footer__nav a:hover,
html[data-tiptop-palette] body.tiptop-standard-system .site-footer__nav a:focus-visible {
	color: var(--tiptop-contrast-surface-text);
}

html[data-tiptop-palette] .entry__content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):hover,
html[data-tiptop-palette] .entry__content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):focus-visible,
html[data-tiptop-palette] .tiptop-page-content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):hover,
html[data-tiptop-palette] .tiptop-page-content :where(p, li) a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):focus-visible,
html[data-tiptop-palette] .tiptop-front-content p a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):hover,
html[data-tiptop-palette] .tiptop-front-content p a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):focus-visible,
html[data-tiptop-palette] .tiptop-front-content li a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):hover,
html[data-tiptop-palette] .tiptop-front-content li a:not(.button):not(.wp-block-button__link):not(.tiptop-outline-action):not(.tiptop-front-view-all--text):focus-visible {
	/* 通常時を border-bottom から text-decoration へ変えたので、hover側の
	 * border-bottom-color も外す（2026-08-10）。下線は currentColor なので文字色に
	 * 追従する。承認済みモックは本文リンクに hover ルールを持たず、
	 * --tiptop-body-link-hover は既定で --tiptop-body-link と同値なので、
	 * 結果としてモックどおり hover で見た目が変わらない。 */
	color: var(--tiptop-body-link-hover);
}

/* ナビだけ --tiptop-nav-link を使う（標準では通常時muted→hoverでcontrast）。
 * カードタイトル/ニュース見出し/サイドバーは通常時から contrast のままにする——
 * モックでもタイトルは黒で、hoverの手応えは画像のズーム側が担っている。 */
html[data-tiptop-palette] .site-nav a {
	color: var(--tiptop-nav-link);
}

html[data-tiptop-palette] .post-card__title a,
html[data-tiptop-palette] .front-content-card .post-card__title a,
html[data-tiptop-palette] .news-item__title a,
html[data-tiptop-palette] .sidebar-list a {
	color: var(--tiptop-contrast);
}

html[data-tiptop-palette] .site-nav .is-current > a,
html[data-tiptop-palette] .site-nav a:hover,
html[data-tiptop-palette] .site-nav a:focus-visible {
	border-bottom-color: var(--tiptop-nav-link-hover);
	color: var(--tiptop-nav-link-hover);
}

html[data-tiptop-palette] .post-card__title a:hover,
html[data-tiptop-palette] .post-card__title a:focus-visible,
html[data-tiptop-palette] .front-content-card .post-card__title a:hover,
html[data-tiptop-palette] .front-content-card .post-card__title a:focus-visible,
html[data-tiptop-palette] .news-item__title a:hover,
html[data-tiptop-palette] .news-item__title a:focus-visible,
html[data-tiptop-palette] .sidebar-list a:hover,
html[data-tiptop-palette] .sidebar-list a:focus-visible {
	border-bottom-color: var(--tiptop-link-hover);
	color: var(--tiptop-link-hover);
}

html[data-tiptop-palette] .site-header {
	border-bottom-color: color-mix(in srgb, var(--tiptop-contrast) var(--tt-tint-soft), transparent);
}

html[data-tiptop-palette] .site-mobile-panel {
	border-color: var(--tiptop-border);
	background: var(--tiptop-base);
	color: var(--tiptop-text);
}

html[data-tiptop-palette] .site-header .site-social-links__link,
html[data-tiptop-palette] .site-mobile-panel .site-social-links__link,
html[data-tiptop-palette] .site-menu-toggle {
	border-color: color-mix(in srgb, var(--tiptop-contrast) var(--tt-tint-soft), transparent);
	color: var(--tiptop-contrast);
}

html[data-tiptop-palette] .site-header .site-social-links__link:hover,
html[data-tiptop-palette] .site-header .site-social-links__link:focus-visible,
html[data-tiptop-palette] .site-mobile-panel .site-social-links__link:hover,
html[data-tiptop-palette] .site-mobile-panel .site-social-links__link:focus-visible {
	border-color: var(--tiptop-contrast);
	background: transparent;
	color: var(--tiptop-contrast);
}

html[data-tiptop-palette] .site-header__cta,
html[data-tiptop-palette] .site-mobile-panel__cta,
html[data-tiptop-palette] .button,
html[data-tiptop-palette] .wp-block-button__link,
html[data-tiptop-palette] .wpcf7 input[type="submit"] {
	border-color: var(--tiptop-button-bg);
	background: var(--tiptop-button-bg);
	box-shadow: none;
	color: var(--tiptop-button-text);
}

html[data-tiptop-palette] .site-header__cta:hover,
html[data-tiptop-palette] .site-header__cta:focus-visible,
html[data-tiptop-palette] .site-mobile-panel__cta:hover,
html[data-tiptop-palette] .site-mobile-panel__cta:focus-visible,
html[data-tiptop-palette] .button:hover,
html[data-tiptop-palette] .button:focus-visible,
html[data-tiptop-palette] .wp-block-button__link:hover,
html[data-tiptop-palette] .wp-block-button__link:focus-visible,
html[data-tiptop-palette] .wpcf7 input[type="submit"]:hover,
html[data-tiptop-palette] .wpcf7 input[type="submit"]:focus-visible {
	border-color: var(--tiptop-button-hover-bg);
	background: var(--tiptop-button-hover-bg);
	color: var(--tiptop-button-hover-text);
}

html[data-tiptop-palette] .site-footer .button,
html[data-tiptop-palette] .site-footer a.button,
html[data-tiptop-palette] .site-footer .wp-block-button__link {
	border-color: var(--tiptop-contrast-surface-button-border);
	background: var(--tiptop-contrast-surface-button-bg);
	box-shadow: none;
	color: var(--tiptop-contrast-surface-button-text);
}

html[data-tiptop-palette] .site-footer .button:hover,
html[data-tiptop-palette] .site-footer .button:focus-visible,
html[data-tiptop-palette] .site-footer a.button:hover,
html[data-tiptop-palette] .site-footer a.button:focus-visible,
html[data-tiptop-palette] .site-footer .wp-block-button__link:hover,
html[data-tiptop-palette] .site-footer .wp-block-button__link:focus-visible {
	border-color: var(--tiptop-contrast-surface-button-hover-border);
	background: var(--tiptop-contrast-surface-button-hover-bg);
	color: var(--tiptop-contrast-surface-button-hover-text);
}

html[data-tiptop-palette] .wpcf7,
html[data-tiptop-palette] .post-card,
html[data-tiptop-palette] .front-content-card,
html[data-tiptop-palette] .front-blog-card,
html[data-tiptop-palette] .news-item,
html[data-tiptop-palette] .work-card,
html[data-tiptop-palette] .card,
html[data-tiptop-palette] .sidebar-section,
html[data-tiptop-palette] .sidebar-widget,
html[data-tiptop-palette] .page-header,
html[data-tiptop-palette] .entry-header,
html[data-tiptop-palette] .service-detail,
html[data-tiptop-palette] .service-flow__list li,
html[data-tiptop-palette] .hero__visual-card {
	border-color: var(--tiptop-border);
	background: var(--tiptop-base);
	box-shadow: none;
	color: var(--tiptop-text);
}

html[data-tiptop-palette] .hero__visual-card--main,
html[data-tiptop-palette] .section--process,
html[data-tiptop-palette] .sidebar-section--accent {
	border-color: var(--tiptop-contrast-surface-border);
	background: var(--tiptop-contrast-surface-bg);
	color: var(--tiptop-contrast-surface-text);
}

html[data-tiptop-palette] .hero__visual-card--main span,
html[data-tiptop-palette] .hero__visual-card--main em,
html[data-tiptop-palette] .section--process p,
html[data-tiptop-palette] .sidebar-section--accent p {
	color: var(--tiptop-contrast-surface-muted);
}

html[data-tiptop-palette] .section--process h2,
html[data-tiptop-palette] .sidebar-section--accent .sidebar-section__title {
	color: var(--tiptop-contrast-surface-text);
}

/* #458: term-list/tag-links/wp-block-post-terms/entry__meta/post-card__meta/
 * news-item__meta/front-content-card__terms分は削除。(0,2,2)で
 * front-accent-usage.css・immersive-system.cssと詳細度同点かつロード順が
 * 常に最先（enqueue優先度で裏取り済み）のため、border-color/background/color
 * いずれも一度も勝てず実質デッドだった。.sidebar-list--compact a
 * （サイドバーウィジェット、別コンポーネント）のみ残す。 */
html[data-tiptop-palette] .sidebar-list--compact a {
	border-color: color-mix(in srgb, var(--tiptop-primary) var(--tt-tint-strong), transparent);
	background: color-mix(in srgb, var(--tiptop-primary) var(--tt-tint-faint), var(--tiptop-base));
	color: var(--tiptop-primary);
}

html[data-tiptop-palette] .sidebar-list--compact a:hover {
	border-color: var(--tiptop-primary);
	background: var(--tiptop-primary);
	color: var(--tiptop-button-text);
}

html[data-tiptop-palette] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not(.search-field):not(.wp-block-search__input):not(:where(.tiptop-contact-form input, .comment-form input, .wpcf7-form-control)),
html[data-tiptop-palette] select,
html[data-tiptop-palette] textarea {
	border-color: var(--tiptop-border);
	background: var(--tiptop-base);
	color: var(--tiptop-text);
}

html[data-tiptop-palette] ::placeholder {
	color: var(--tiptop-muted);
}