:root {

	/*基本色*/
	--white: #f5f5f5;
	--black: #3d3d3d;

	/*カラーパレット*/
	--main: #07889b;
	--support: #66b9bf;
	--accent: #e37222;
	--sub: #eeaa7b;

	/*カラーコード+33で透明度20％*/
	--main-focus: #07889b33;
	--support-focus: #66b9bf33;
	--accent-focus: #e3722233;
	--sub-focus: #eeaa7b33;
}


/* フレームワークの色設定 */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
	--background-color: var(--white);
	--color: var(--black);

	--primary: var(--main);
	--primary-hover: var(--support);
	--primary-focus: var(--support-focus);
	--primary-inverse: var(--white);

	--secondary: var(--accent);
	--secondary-hover: var(--sub);
	--secondary-focus: var(--sub-focus);
	--secondary-inverse: var(--white);



}

/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--background-color: var(--black);
		--color: var(--white);

		--primary: var(--support);
		--primary-hover: var(--main);
		--primary-focus: var(--main-focus);
		--primary-inverse: var(--black);

		--secondary: var(--sub);
		--secondary-hover: var(--accent);
		--secondary-focus: var(--accent-focus);
		--secondary-inverse: var(--black);

	}
}

/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
	--primary: var(--support);
	--primary-hover: var(--main);
	--primary-focus: var(--main-focus);
	--primary-inverse: var(--black);

	--secondary: var(--sub);
	--secondary-hover: var(--accent);
	--secondary-focus: var(--accent-focus);
	--secondary-inverse: var(--black);

}

[data-theme="light"],
:root:not([data-theme="dark"]), [data-theme="dark"] {
	--accordion-border-color: var(--background-color);
	--form-element-background-color: var(--background-color);
	--form-element-border-color: var(--secondary);
	--form-element-active-background-color: var(--primary-focus);
}

@media only screen and (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--accordion-border-color: var(--background-color);
		--form-element-background-color: var(--background-color);
		--form-element-border-color: var(--secondary);
		--form-element-active-background-color: var(--primary-focus);
	}
}