@import "base.css";

/* Status variant classes go in `@layer variants` — highest priority, always win.
 * Each variant overrides the inner three steps of the 5-step scale at its scope. */
@layer variants {
	.loading {
		--color-dark: var(--dark-gray);
		--color-vivid: var(--vivid-gray);
		--color-light: var(--light-gray);
	}

	.info {
		--color-dark: var(--dark-blue);
		--color-vivid: var(--vivid-blue);
		--color-light: var(--light-blue);
	}

	.success {
		--color-dark: var(--dark-green);
		--color-vivid: var(--vivid-green);
		--color-light: var(--light-green);
	}

	.warning {
		--color-dark: var(--dark-orange);
		--color-vivid: var(--vivid-orange);
		--color-light: var(--light-orange);
	}

	.error,
	.danger {
		--color-dark: var(--dark-red);
		--color-vivid: var(--vivid-red);
		--color-light: var(--light-red);
	}
}