@mixin section_white{
	background: var(--coyote-background);
	color: var(--coyote-text-color) !important;
	--icon-block-background: var(--coyote-button-background);
	--icon-block-color: var(--coyote-button-text);
	--icon-block-background-hover: var(--coyote-button-hover-background);
	--icon-block-color-hover: var(--coyote-button-hover-text);
	--counter-color: var(--coyote-text-color);
	--contrast-color: var(--coyote-accent);
	--background: var(--coyote-background);
	.rich-text a{
		color: var(--coyote-text-color);
	}
}

@mixin coyote-surface-card(
	$background: var(--icon-block-background),
	$color: inherit,
	$border-color: var(--coyote-border-color)
){
	background: $background;
	color: $color;
	border: 1px solid $border-color;
	border-radius: var(--coyote-border-radius);
	box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

@mixin coyote-surface-hover{
	transform: translateY(-4px);
	box-shadow: 0 28px 64px rgba(15, 23, 42, 0.14);
	border-color: color-mix(in srgb, var(--coyote-primary) 35%, var(--coyote-border-color));
}

@mixin section_dark{
	background: var(--coyote-accent);
	color: var(--coyote-footer-text) !important;
	--icon-block-background: var(--coyote-surface-background);
	--icon-block-color: var(--coyote-text-color);
	--icon-block-background-hover: var(--coyote-button-background);
	--icon-block-color-hover: var(--coyote-button-text);
	--counter-color: var(--coyote-footer-text);
	--background: var(--coyote-accent);
	--contrast-color: var(--coyote-surface-background);
	.rich-text a{
		color: var(--coyote-footer-text);
	}
}

@mixin section_light{
	background: var(--coyote-surface-background);
	color: var(--coyote-text-color) !important;
	--icon-block-background: var(--coyote-button-background);
	--icon-block-color: var(--coyote-button-text);
	--icon-block-background-hover: var(--coyote-button-hover-background);
	--icon-block-color-hover: var(--coyote-button-hover-text);
	--counter-color: var(--coyote-text-color);
	--background: var(--coyote-surface-background);
	--contrast-color: var(--coyote-accent);
	.rich-text a{
		color: var(--coyote-text-color);
	}
}
