/**
 * ライト / ダークの切り替え（tools/build_color_scheme.py が theme.json から生成。手で直さない）
 *
 * 標準はライト（theme.json の palette）。ダークの値は theme.json の settings.custom.dark。
 */

:root {
	color-scheme: light;
}

/* 常にダークの領域 */
.safari-header,
.safari-hero,
.safari-footer {
	--wp--preset--color--base: var(--wp--custom--dark--color--base);
	--wp--preset--color--base-soft: var(--wp--custom--dark--color--base-soft);
	--wp--preset--color--base-strong: var(--wp--custom--dark--color--base-strong);
	--wp--preset--color--contrast: var(--wp--custom--dark--color--contrast);
	--wp--preset--color--contrast-soft: var(--wp--custom--dark--color--contrast-soft);
	--wp--preset--color--line: var(--wp--custom--dark--color--line);
	--wp--preset--color--main: var(--wp--custom--dark--color--main);
	--wp--preset--color--accent: var(--wp--custom--dark--color--accent);
	--wp--preset--color--accent-yellow: var(--wp--custom--dark--color--accent-yellow);
	--wp--preset--color--link: var(--wp--custom--dark--color--link);
	--wp--preset--color--focus: var(--wp--custom--dark--color--focus);
	--wp--preset--color--swl-deep-01: var(--wp--custom--dark--color--swl-deep-01);
	--wp--preset--color--swl-deep-02: var(--wp--custom--dark--color--swl-deep-02);
	--wp--preset--color--swl-deep-03: var(--wp--custom--dark--color--swl-deep-03);
	--wp--preset--color--swl-deep-04: var(--wp--custom--dark--color--swl-deep-04);
	--wp--preset--color--swl-pale-01: var(--wp--custom--dark--color--swl-pale-01);
	--wp--preset--color--swl-pale-02: var(--wp--custom--dark--color--swl-pale-02);
	--wp--preset--color--swl-pale-03: var(--wp--custom--dark--color--swl-pale-03);
	--wp--preset--color--swl-pale-04: var(--wp--custom--dark--color--swl-pale-04);
	--wp--preset--color--marker-yellow: var(--wp--custom--dark--color--marker-yellow);
	--wp--preset--color--white: var(--wp--custom--dark--color--white);
	--wp--preset--color--black: var(--wp--custom--dark--color--black);
	--wp--preset--gradient--stage: var(--wp--custom--dark--stage);
	--wp--preset--shadow--glow: var(--wp--custom--dark--glow);
	--wp--preset--shadow--card: var(--wp--custom--dark--card);
	--wp--custom--marker: var(--wp--custom--dark--marker);
	color-scheme: dark;
	color: var(--wp--preset--color--contrast);
}

/* 読者がダークを選んだとき */
:root[data-theme="dark"] body {
	--wp--preset--color--base: var(--wp--custom--dark--color--base);
	--wp--preset--color--base-soft: var(--wp--custom--dark--color--base-soft);
	--wp--preset--color--base-strong: var(--wp--custom--dark--color--base-strong);
	--wp--preset--color--contrast: var(--wp--custom--dark--color--contrast);
	--wp--preset--color--contrast-soft: var(--wp--custom--dark--color--contrast-soft);
	--wp--preset--color--line: var(--wp--custom--dark--color--line);
	--wp--preset--color--main: var(--wp--custom--dark--color--main);
	--wp--preset--color--accent: var(--wp--custom--dark--color--accent);
	--wp--preset--color--accent-yellow: var(--wp--custom--dark--color--accent-yellow);
	--wp--preset--color--link: var(--wp--custom--dark--color--link);
	--wp--preset--color--focus: var(--wp--custom--dark--color--focus);
	--wp--preset--color--swl-deep-01: var(--wp--custom--dark--color--swl-deep-01);
	--wp--preset--color--swl-deep-02: var(--wp--custom--dark--color--swl-deep-02);
	--wp--preset--color--swl-deep-03: var(--wp--custom--dark--color--swl-deep-03);
	--wp--preset--color--swl-deep-04: var(--wp--custom--dark--color--swl-deep-04);
	--wp--preset--color--swl-pale-01: var(--wp--custom--dark--color--swl-pale-01);
	--wp--preset--color--swl-pale-02: var(--wp--custom--dark--color--swl-pale-02);
	--wp--preset--color--swl-pale-03: var(--wp--custom--dark--color--swl-pale-03);
	--wp--preset--color--swl-pale-04: var(--wp--custom--dark--color--swl-pale-04);
	--wp--preset--color--marker-yellow: var(--wp--custom--dark--color--marker-yellow);
	--wp--preset--color--white: var(--wp--custom--dark--color--white);
	--wp--preset--color--black: var(--wp--custom--dark--color--black);
	--wp--preset--gradient--stage: var(--wp--custom--dark--stage);
	--wp--preset--shadow--glow: var(--wp--custom--dark--glow);
	--wp--preset--shadow--card: var(--wp--custom--dark--card);
	--wp--custom--marker: var(--wp--custom--dark--marker);
	color-scheme: dark;
	color: var(--wp--preset--color--contrast);
}

/* OS がダークモードで、読者がライトを選んでいないとき */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) body {
		--wp--preset--color--base: var(--wp--custom--dark--color--base);
		--wp--preset--color--base-soft: var(--wp--custom--dark--color--base-soft);
		--wp--preset--color--base-strong: var(--wp--custom--dark--color--base-strong);
		--wp--preset--color--contrast: var(--wp--custom--dark--color--contrast);
		--wp--preset--color--contrast-soft: var(--wp--custom--dark--color--contrast-soft);
		--wp--preset--color--line: var(--wp--custom--dark--color--line);
		--wp--preset--color--main: var(--wp--custom--dark--color--main);
		--wp--preset--color--accent: var(--wp--custom--dark--color--accent);
		--wp--preset--color--accent-yellow: var(--wp--custom--dark--color--accent-yellow);
		--wp--preset--color--link: var(--wp--custom--dark--color--link);
		--wp--preset--color--focus: var(--wp--custom--dark--color--focus);
		--wp--preset--color--swl-deep-01: var(--wp--custom--dark--color--swl-deep-01);
		--wp--preset--color--swl-deep-02: var(--wp--custom--dark--color--swl-deep-02);
		--wp--preset--color--swl-deep-03: var(--wp--custom--dark--color--swl-deep-03);
		--wp--preset--color--swl-deep-04: var(--wp--custom--dark--color--swl-deep-04);
		--wp--preset--color--swl-pale-01: var(--wp--custom--dark--color--swl-pale-01);
		--wp--preset--color--swl-pale-02: var(--wp--custom--dark--color--swl-pale-02);
		--wp--preset--color--swl-pale-03: var(--wp--custom--dark--color--swl-pale-03);
		--wp--preset--color--swl-pale-04: var(--wp--custom--dark--color--swl-pale-04);
		--wp--preset--color--marker-yellow: var(--wp--custom--dark--color--marker-yellow);
		--wp--preset--color--white: var(--wp--custom--dark--color--white);
		--wp--preset--color--black: var(--wp--custom--dark--color--black);
		--wp--preset--gradient--stage: var(--wp--custom--dark--stage);
		--wp--preset--shadow--glow: var(--wp--custom--dark--glow);
		--wp--preset--shadow--card: var(--wp--custom--dark--card);
		--wp--custom--marker: var(--wp--custom--dark--marker);
		color-scheme: dark;
		color: var(--wp--preset--color--contrast);
	}
}