/* theme light */
[data-theme="light"],
[data-theme="dark"] [data-theme="invert"] {
	--theme--background: var(--swatch--light);
	--theme--text: var(--swatch--dark);
	--theme--border: color-mix(in srgb, var(--swatch--dark) 20%, transparent);
  --theme--form: color-mix(in srgb, var(--swatch--dark) 7%, transparent);
	/* button primary */
	--button--background: var(--swatch--dark);
	--button--text: var(--swatch--light);
	--button--border: var(--swatch--dark);
	--button--background-hover: var(--swatch--light);
	--button--text-hover: var(--swatch--dark);
	--button--border-hover: var(--swatch--dark);
	/* button secondary */
	--button-secondary--background: var(--swatch--transparent);
	--button-secondary--text: var(--swatch--dark);
	--button-secondary--border: color-mix(in srgb, var(--swatch--dark) 20%, transparent);
	--button-secondary--background-hover: var(--swatch--dark);
	--button-secondary--text-hover: var(--swatch--light);
	--button-secondary--border-hover: var(--swatch--dark);
}
/* theme dark */
:root,
[data-theme="dark"],
[data-theme="invert"],
[data-theme="light"] [data-theme="invert"] {
	--theme--background: var(--swatch--dark);
	--theme--text: var(--swatch--light);
	--theme--border: color-mix(in srgb, var(--swatch--light) 20%, transparent);
  --theme--form: color-mix(in srgb, var(--swatch--light) 7%, transparent);
	/* button primary */
	--button--background: var(--swatch--light);
	--button--text: var(--swatch--dark);
	--button--border: var(--swatch--light);
	--button--background-hover: var(--swatch--dark);
	--button--text-hover: var(--swatch--light);
	--button--border-hover: var(--swatch--light);
	/* button secondary */
	--button-secondary--background: var(--swatch--transparent);
	--button-secondary--text: var(--swatch--light);
	--button-secondary--border: color-mix(in srgb, var(--swatch--light) 20%, transparent);
	--button-secondary--background-hover: var(--swatch--light);
	--button-secondary--text-hover: var(--swatch--dark);
	--button-secondary--border-hover: var(--swatch--light);
}
/* button secondary */
[data-button-style="secondary"] {
	--button--background: var(--button-secondary--background);
	--button--text: var(--button-secondary--text);
	--button--border: var(--button-secondary--border);
	--button--background-hover: var(--button-secondary--background-hover);
	--button--text-hover: var(--button-secondary--text-hover);
	--button--border-hover: var(--button-secondary--border-hover);
}
/* apply colors */
:is(c, :where([data-theme]:not([data-theme="inherit"]))) {
	background-color: var(--theme--background);
	color: var(--theme--text);
}