/*
 * Normalize button states, home section surfaces, and palette token mapping.
 * Loaded after color-palettes.css so these rules can reconcile kit-derived palette values
 * without increasing conflicts in the base palette file.
 */

html[data-tiptop-palette="mono-editorial"] {
	--tiptop-primary: #111111;
	--tiptop-accent: #3450dc;
	--tiptop-contrast: #111111;
	--tiptop-text: #222222;
	--tiptop-muted: #707070;
	--tiptop-base: #ffffff;
	--tiptop-surface: #f7f7f7;
	--tiptop-surface-alt: #f2f2f2;
	--tiptop-border: #e4e4e4;
	--tiptop-link: #111111;
	--tiptop-button-bg: #111111;
	--tiptop-button-text: #ffffff;
	--tiptop-button-hover-bg: #3450dc;
	--tiptop-button-hover-text: #ffffff;
}

html[data-tiptop-palette="warm-craft"] {
	--tiptop-primary: #bf0000;
	--tiptop-accent: #b28a14;
	--tiptop-contrast: #222222;
	--tiptop-text: #222222;
	--tiptop-muted: #71685d;
	--tiptop-base: #fbfaf8;
	--tiptop-surface: #f3eee7;
	--tiptop-surface-alt: #efe8dd;
	--tiptop-border: #ddd1c4;
	--tiptop-link: #bf0000;
	--tiptop-button-bg: #bf0000;
	--tiptop-button-text: #ffffff;
	--tiptop-button-hover-bg: #222222;
	--tiptop-button-hover-text: #ffffff;
}

html[data-tiptop-palette="tech-blue"] {
	--tiptop-primary: #005aff;
	--tiptop-accent: #ff3c1e;
	--tiptop-contrast: #1f2933;
	--tiptop-text: #333333;
	--tiptop-muted: #66707a;
	--tiptop-base: #f1f4f6;
	--tiptop-surface: #ffffff;
	--tiptop-surface-alt: #dfe4ea;
	--tiptop-border: #d0d0d0;
	--tiptop-link: #005aff;
	--tiptop-button-bg: #005aff;
	--tiptop-button-text: #ffffff;
	--tiptop-button-hover-bg: #1f2933;
	--tiptop-button-hover-text: #ffffff;
}

html[data-tiptop-palette="pop-bright"] {
	--tiptop-primary: #1ba3fb;
	--tiptop-accent: #f6ad17;
	--tiptop-contrast: #000000;
	--tiptop-text: #000000;
	--tiptop-muted: #626262;
	--tiptop-base: #ffffff;
	--tiptop-surface: #fff7dc;
	--tiptop-surface-alt: #eef8cc;
	--tiptop-border: #e3e3e3;
	--tiptop-link: #006fba;
	--tiptop-button-bg: #000000;
	--tiptop-button-text: #ffffff;
	--tiptop-button-hover-bg: #1ba3fb;
	--tiptop-button-hover-text: #ffffff;
}

html[data-tiptop-palette="luxe-night"] {
	/* primary は accent（#8c92a4 青みグレー）の同系。2026-08-11 まで #007bff
	 * だったが、黒＋グレー＋白でまとめたこのパレットで唯一の原色として浮いており、
	 * ボタン hover の白文字が 3.98:1 で読みにくかった。色相を保って暗くし、
	 * 白文字 5.10:1 ／ 黒背景 4.12:1 の両立点へ。 */
	--tiptop-primary: #696e7b;
	--tiptop-accent: #8c92a4;
	--tiptop-contrast: #ffffff;
	--tiptop-text: #ffffff;
	--tiptop-muted: #c1c5d0;
	--tiptop-base: #000000;
	--tiptop-surface: #181c20;
	--tiptop-surface-alt: #292d39;
	--tiptop-border: #373c4b;
	--tiptop-link: #ffffff;
	--tiptop-button-bg: #ffffff;
	--tiptop-button-text: #000000;
	--tiptop-button-hover-bg: #696e7b;
	--tiptop-button-hover-text: #ffffff;
	--tiptop-contrast-surface-bg: #181c20;
	--tiptop-contrast-surface-text: #ffffff;
	--tiptop-contrast-surface-muted: #c1c5d0;
	--tiptop-contrast-surface-border: #373c4b;
	--tiptop-contrast-surface-button-bg: #ffffff;
	--tiptop-contrast-surface-button-text: #181c20;
	--tiptop-contrast-surface-button-border: #ffffff;
	--tiptop-contrast-surface-button-hover-bg: transparent;
	--tiptop-contrast-surface-button-hover-text: #ffffff;
	--tiptop-contrast-surface-button-hover-border: #ffffff;
}

html[data-tiptop-palette="plum-noir"] {
	--tiptop-primary: #c14f7d;
	--tiptop-accent: #d9a7c0;
	--tiptop-contrast: #f7eef3;
	--tiptop-text: #f7eef3;
	--tiptop-muted: #c7aab8;
	--tiptop-base: #160910;
	--tiptop-surface: #241019;
	--tiptop-surface-alt: #331723;
	--tiptop-border: #422334;
	--tiptop-link: #f7eef3;
	--tiptop-button-bg: #f7eef3;
	--tiptop-button-text: #160910;
	--tiptop-button-hover-bg: #c14f7d;
	--tiptop-button-hover-text: #f7eef3;
	--tiptop-contrast-surface-bg: #241019;
	--tiptop-contrast-surface-text: #f7eef3;
	--tiptop-contrast-surface-muted: #c7aab8;
	--tiptop-contrast-surface-border: #422334;
	--tiptop-contrast-surface-button-bg: #f7eef3;
	--tiptop-contrast-surface-button-text: #241019;
	--tiptop-contrast-surface-button-border: #f7eef3;
	--tiptop-contrast-surface-button-hover-bg: transparent;
	--tiptop-contrast-surface-button-hover-text: #f7eef3;
	--tiptop-contrast-surface-button-hover-border: #f7eef3;
}

html[data-tiptop-palette="ryokan-cha"] {
	--tiptop-primary: #8a6e4e;
	--tiptop-accent: #c9b89a;
	--tiptop-contrast: #2e3038;
	--tiptop-text: #3e4048;
	--tiptop-muted: #70685a;
	--tiptop-base: #faf7f1;
	--tiptop-surface: #ede9e0;
	--tiptop-surface-alt: #e3dccc;
	--tiptop-border: #dcd3c2;
	--tiptop-link: #8a6e4e;
	--tiptop-button-bg: #8a6e4e;
	--tiptop-button-text: #ffffff;
	--tiptop-button-hover-bg: #3e4048;
	--tiptop-button-hover-text: #ffffff;
}

html[data-tiptop-palette="sumi-shu"] {
	--tiptop-primary: #8a3e2e;
	--tiptop-accent: #6e5a42;
	--tiptop-contrast: #000000;
	--tiptop-text: #333333;
	--tiptop-muted: #6e5a42;
	--tiptop-base: #f7f6f3;
	--tiptop-surface: #f1f1f1;
	--tiptop-surface-alt: #e7e5df;
	--tiptop-border: #dbd8d1;
	--tiptop-link: #8a3e2e;
	--tiptop-button-bg: #8a3e2e;
	--tiptop-button-text: #ffffff;
	--tiptop-button-hover-bg: #000000;
	--tiptop-button-hover-text: #ffffff;
}

html[data-tiptop-palette="navy-blush"] {
	--tiptop-primary: #ce8aa0;
	--tiptop-accent: #e7b7a6;
	--tiptop-contrast: #1b3345;
	--tiptop-text: #1b3345;
	--tiptop-muted: #5e6a75;
	--tiptop-base: #f3f5f6;
	--tiptop-surface: #e6e9eb;
	--tiptop-surface-alt: #d9dee1;
	--tiptop-border: #d0d6da;
	--tiptop-link: #1b3345;
	--tiptop-button-bg: #1b3345;
	--tiptop-button-text: #f3f5f6;
	--tiptop-button-hover-bg: #b26a82;
	--tiptop-button-hover-text: #111111;
}

html[data-tiptop-palette="cobalt-press"] {
	--tiptop-primary: #f2909e;
	--tiptop-accent: #c88ab8;
	--tiptop-contrast: #4a4049;
	--tiptop-text: #4a4049;
	--tiptop-muted: #73676e;
	--tiptop-base: #fdf3f7;
	--tiptop-surface: #f2e8ed;
	--tiptop-surface-alt: #e8dee2;
	--tiptop-border: #e0d6db;
	--tiptop-link: #4a4049;
	--tiptop-button-bg: #4a4049;
	--tiptop-button-text: #fdf3f7;
	--tiptop-button-hover-bg: #d95f73;
	--tiptop-button-hover-text: #111111;
}

html[data-tiptop-palette="deep-forest"] {
	--tiptop-primary: #76ab9f;
	--tiptop-accent: #e9b7bc;
	--tiptop-contrast: #2e4a44;
	--tiptop-text: #33413e;
	--tiptop-muted: #50736b;
	--tiptop-base: #f6fbf9;
	--tiptop-surface: #eaf0ee;
	--tiptop-surface-alt: #dee6e3;
	--tiptop-border: #d6dfdc;
	--tiptop-link: #2e4a44;
	--tiptop-button-bg: #2e4a44;
	--tiptop-button-text: #f6fbf9;
	--tiptop-button-hover-bg: #c77e8c;
	--tiptop-button-hover-text: #111111;
}

/* allur（キット・ダーク／茶×錆on黒）を violet-noir スロットへ recolor（Phase 2 試作の1パレット）。
 * このスロットが現在サイトに適用中（data-tiptop-palette="violet-noir"）＝実画面で即目視できる。
 * キーは violet_noir のまま値だけ差し替え。--tiptop-link-hover は案B（curated 可読アクセント）＝
 * 暗背景で沈まない明るい錆（生primary #8a3a20 は黒に沈む＝2.71ゆえ直接ホバー不可）。 */
html[data-tiptop-palette="violet-noir"] {
	--tiptop-primary: #8a3a20;
	--tiptop-accent: #c4653f;
	--tiptop-contrast: #ede4d6;
	--tiptop-text: #ede4d6;
	--tiptop-muted: #b7a99a;
	--tiptop-base: #000000;
	--tiptop-surface: #17110d;
	--tiptop-surface-alt: #2a2019;
	--tiptop-border: #3a2e25;
	--tiptop-link: #ede4d6;
	--tiptop-button-bg: #ede4d6;
	--tiptop-button-text: #000000;
	--tiptop-button-hover-bg: #d9773f;
	--tiptop-button-hover-text: #000000;
	--tiptop-contrast-surface-bg: #17110d;
	--tiptop-contrast-surface-text: #ede4d6;
	--tiptop-contrast-surface-muted: #b7a99a;
	--tiptop-contrast-surface-border: #3a2e25;
	--tiptop-contrast-surface-button-bg: #ede4d6;
	--tiptop-contrast-surface-button-text: #17110d;
	--tiptop-contrast-surface-button-border: #ede4d6;
	--tiptop-contrast-surface-button-hover-bg: transparent;
	--tiptop-contrast-surface-button-hover-text: #ede4d6;
	--tiptop-contrast-surface-button-hover-border: #ede4d6;
}

html[data-tiptop-palette] {
	--tiptop-button-border: var(--tiptop-button-bg);
	--tiptop-button-hover-border: var(--tiptop-button-hover-bg);
	--tiptop-button-outline-border: var(--tiptop-button-bg);
	--tiptop-button-outline-text: var(--tiptop-button-bg);
	--tiptop-button-outline-hover-bg: var(--tiptop-button-bg);
	--tiptop-button-outline-hover-text: var(--tiptop-button-text);
	--tiptop-home-section-base: var(--tiptop-base);
	--tiptop-home-section-surface: var(--tiptop-surface);
	--tiptop-home-section-alt: var(--tiptop-surface-alt);
	--tiptop-home-section-contrast-bg: var(--tiptop-contrast-surface-bg);
	--tiptop-home-section-contrast-text: var(--tiptop-contrast-surface-text);
	--tiptop-home-section-contrast-muted: var(--tiptop-contrast-surface-muted);
	--tiptop-home-section-contrast-border: var(--tiptop-contrast-surface-border);
}

html[data-tiptop-palette] .site-main--front {
	--tiptop-front-action: var(--tiptop-button-outline-text);
	--tiptop-front-action-hover-bg: var(--tiptop-button-outline-hover-bg);
	--tiptop-front-action-hover-text: var(--tiptop-button-outline-hover-text);
}

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-border);
	border-radius: var(--tt-radius-button, var(--tt-radius-none));
	background: var(--tiptop-button-bg);
	box-shadow: none;
	color: var(--tiptop-button-text);
	cursor: pointer;
}

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-border);
	background: var(--tiptop-button-hover-bg);
	color: var(--tiptop-button-hover-text);
}

html[data-tiptop-palette] .more a,
html[data-tiptop-palette] .post-card__more,
html[data-tiptop-palette] .excerpt-more,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .more a,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .post-card__more,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .excerpt-more,
html[data-tiptop-palette] .button.button--secondary,
html[data-tiptop-palette] .tiptop-outline-action {
	border-color: var(--tiptop-button-outline-border);
	border-radius: var(--tt-radius-button, var(--tt-radius-none));
	background: transparent;
	box-shadow: none;
	color: var(--tiptop-button-outline-text);
}

html[data-tiptop-palette] .more a:hover,
html[data-tiptop-palette] .more a:focus-visible,
html[data-tiptop-palette] .post-card__more:hover,
html[data-tiptop-palette] .post-card__more:focus-visible,
html[data-tiptop-palette] .excerpt-more:hover,
html[data-tiptop-palette] .excerpt-more:focus-visible,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .more a:hover,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .more a:focus-visible,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .post-card__more:hover,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .post-card__more:focus-visible,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .excerpt-more:hover,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .excerpt-more:focus-visible,
html[data-tiptop-palette] .button.button--secondary:hover,
html[data-tiptop-palette] .button.button--secondary:focus-visible,
html[data-tiptop-palette] .tiptop-outline-action:hover,
html[data-tiptop-palette] .tiptop-outline-action:focus-visible {
	border-color: var(--tiptop-button-outline-hover-bg);
	background: var(--tiptop-button-outline-hover-bg);
	color: var(--tiptop-button-outline-hover-text);
}

/* 詳細ページの「一覧へ戻る」だけ、承認済みモックと同じ「ホバーでアクセント色」にする
 * （2026-08-12・Issue #913・オーナー指摘）。モックの .button--ghost は静止時の3宣言しか
 * 持たず、ホバーは .button:hover をそのまま継承して --tiptop-button-hover-bg（アクセント）に
 * なる。実サイトは専用の --tiptop-button-outline-hover-bg を当てており、これは
 * var(--tiptop-button-bg) から導出＝黒。静止時は完全一致でホバーの色だけ違っていた。
 *
 * トークンの値そのものを変えないのは、--tiptop-button-outline-hover-bg を
 * .post-card__more / .excerpt-more / .button--secondary と共有しているため。
 * モックではそれらは .text-action（枠なしの文字リンク）で背景を持たないので、
 * 値を変えると青い背景がついてモックからさらに離れる。
 *
 * .tiptop-front-view-all を除くのは、トップの「View All」が同じクラスを
 * 使っているため。モックではそこは枠なしの文字リンクで、ボタンとして扱うこと自体が
 * 別の差分（#868 の管轄）なので、この修正では巻き込まない。 */
html[data-tiptop-palette] .tiptop-outline-action:not(.tiptop-front-view-all):hover,
html[data-tiptop-palette] .tiptop-outline-action:not(.tiptop-front-view-all):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,
html[data-tiptop-palette] .sec--ink .button,
html[data-tiptop-palette] .sec--ink a.button,
html[data-tiptop-palette] .section--ink .button,
html[data-tiptop-palette] .section--ink a.button,
html[data-tiptop-palette] .tiptop-front-section--contrast .button,
html[data-tiptop-palette] .tiptop-front-section--contrast a.button {
	border-color: var(--tiptop-contrast-surface-button-border);
	border-radius: var(--tt-radius-button, var(--tt-radius-none));
	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,
html[data-tiptop-palette] .sec--ink .button:hover,
html[data-tiptop-palette] .sec--ink .button:focus-visible,
html[data-tiptop-palette] .section--ink .button:hover,
html[data-tiptop-palette] .section--ink .button:focus-visible,
html[data-tiptop-palette] .tiptop-front-section--contrast .button:hover,
html[data-tiptop-palette] .tiptop-front-section--contrast .button: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] .site-footer .more a,
html[data-tiptop-palette] .sec--ink .more a,
html[data-tiptop-palette] .sec--ink .post-card__more,
html[data-tiptop-palette] .section--ink .more a,
html[data-tiptop-palette] .section--ink .post-card__more,
html[data-tiptop-palette] .tiptop-front-section--contrast .more a,
html[data-tiptop-palette] .tiptop-front-section--contrast .post-card__more {
	border-color: var(--tiptop-contrast-surface-button-border);
	background: transparent;
	color: var(--tiptop-contrast-surface-button-border);
}

html[data-tiptop-palette] .site-footer .more a:hover,
html[data-tiptop-palette] .site-footer .more a:focus-visible,
html[data-tiptop-palette] .sec--ink .more a:hover,
html[data-tiptop-palette] .sec--ink .more a:focus-visible,
html[data-tiptop-palette] .sec--ink .post-card__more:hover,
html[data-tiptop-palette] .sec--ink .post-card__more:focus-visible,
html[data-tiptop-palette] .section--ink .more a:hover,
html[data-tiptop-palette] .section--ink .more a:focus-visible,
html[data-tiptop-palette] .section--ink .post-card__more:hover,
html[data-tiptop-palette] .section--ink .post-card__more:focus-visible,
html[data-tiptop-palette] .tiptop-front-section--contrast .more a:hover,
html[data-tiptop-palette] .tiptop-front-section--contrast .more a:focus-visible,
html[data-tiptop-palette] .tiptop-front-section--contrast .post-card__more:hover,
html[data-tiptop-palette] .tiptop-front-section--contrast .post-card__more:focus-visible {
	border-color: var(--tiptop-contrast-surface-button-border);
	background: var(--tiptop-contrast-surface-button-bg);
	color: var(--tiptop-contrast-surface-button-text);
}

html[data-tiptop-palette] .site-main--front .tiptop-front-content .intro1,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .intro-services,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .siryou,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .intro-news {
	background: var(--tiptop-home-section-base);
	color: var(--tiptop-text);
}

html[data-tiptop-palette] .site-main--front .tiptop-front-content .intro2,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .website,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .intro4 {
	background: var(--tiptop-home-section-surface);
	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,
html[data-tiptop-palette] .sec--ink,
html[data-tiptop-palette] .section--ink,
html[data-tiptop-palette] .tiptop-front-section--contrast {
	border-color: var(--tiptop-home-section-contrast-border);
	background: var(--tiptop-home-section-contrast-bg);
	color: var(--tiptop-home-section-contrast-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,
html[data-tiptop-palette] .sec--ink p,
html[data-tiptop-palette] .section--ink p,
html[data-tiptop-palette] .tiptop-front-section--contrast p {
	color: var(--tiptop-home-section-contrast-muted);
}

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

html[data-tiptop-palette] .sec--ink a:not(.button),
html[data-tiptop-palette] .section--ink a:not(.button),
html[data-tiptop-palette] .tiptop-front-section--contrast a:not(.button) {
	color: var(--tiptop-home-section-contrast-text);
}

/*
 * Button variants — secondary (outline) is now folded directly into the MoreLink
 * selector list above: same component, same tokens (--tiptop-button-outline-*),
 * per 2026-07-23 decision to unify "詳しく見る"/View All Works with MoreLink's
 * fill-on-hover behavior instead of a separate accent-recolor-only treatment.
 */

html[data-tiptop-palette] .sec--ink .front-content-card,
html[data-tiptop-palette] .sec--ink .front-blog-card,
html[data-tiptop-palette] .sec--ink .news-item,
html[data-tiptop-palette] .section--ink .front-content-card,
html[data-tiptop-palette] .section--ink .front-blog-card,
html[data-tiptop-palette] .section--ink .news-item,
html[data-tiptop-palette] .tiptop-front-section--contrast .front-content-card,
html[data-tiptop-palette] .tiptop-front-section--contrast .front-blog-card,
html[data-tiptop-palette] .tiptop-front-section--contrast .news-item {
	border-color: var(--tiptop-home-section-contrast-border);
	background: color-mix(in srgb, var(--tiptop-home-section-contrast-text) var(--tt-tint-faint), transparent);
	color: var(--tiptop-home-section-contrast-text);
}