/* Design tokens derived from Theme Settings CSS variables */

:root {
	--arb-gutter: 5vw;
	--arb-container-max: 100%;
	--arb-border: color-mix(in srgb, var(--arb-bg) 10%, transparent);
	--arb-border-strong: color-mix(in srgb, var(--arb-bg) 12%, transparent);
	--arb-shadow: color-mix(in srgb, var(--arb-bg) 6%, transparent);
	--arb-shadow-strong: color-mix(in srgb, var(--arb-bg) 12%, transparent);
	--arb-overlay-soft: color-mix(in srgb, var(--arb-bg) 10%, transparent);
	--arb-overlay: color-mix(in srgb, var(--arb-bg) 65%, transparent);
	--arb-overlay-strong: color-mix(in srgb, var(--arb-bg) 75%, transparent);
	--arb-overlay-solid: color-mix(in srgb, var(--arb-bg) 92%, transparent);
	--arb-text-soft: color-mix(in srgb, var(--arb-text) 75%, transparent);
	--arb-text-faint: color-mix(in srgb, var(--arb-text) 8%, transparent);
	--arb-hover-light: color-mix(in srgb, var(--arb-text) 92%, var(--arb-muted));
	--arb-hover-dark: color-mix(in srgb, var(--arb-bg) 88%, var(--arb-text));
}