@import "base.css";

/* Variant classes go in `@layer variants` — the highest-priority layer, so they always win.
 * Each variant overrides the inner three steps of the 5-step scale at its scope; `--color-black`
 * and `--color-white` inherit from the page so the unchanging extremes stay available. */
@layer variants {
	/* Named colors */
	.gray {
		--color-dark: var(--dark-gray);
		--color-vivid: var(--vivid-gray);
		--color-light: var(--light-gray);
	}
	.red {
		--color-dark: var(--dark-red);
		--color-vivid: var(--vivid-red);
		--color-light: var(--light-red);
	}
	.orange {
		--color-dark: var(--dark-orange);
		--color-vivid: var(--vivid-orange);
		--color-light: var(--light-orange);
	}
	.yellow {
		--color-dark: var(--dark-yellow);
		--color-vivid: var(--vivid-yellow);
		--color-light: var(--light-yellow);
	}
	.green {
		--color-dark: var(--dark-green);
		--color-vivid: var(--vivid-green);
		--color-light: var(--light-green);
	}
	.aqua {
		--color-dark: var(--dark-aqua);
		--color-vivid: var(--vivid-aqua);
		--color-light: var(--light-aqua);
	}
	.blue {
		--color-dark: var(--dark-blue);
		--color-vivid: var(--vivid-blue);
		--color-light: var(--light-blue);
	}
	.purple {
		--color-dark: var(--dark-purple);
		--color-vivid: var(--vivid-purple);
		--color-light: var(--light-purple);
	}
	.pink {
		--color-dark: var(--dark-pink);
		--color-vivid: var(--vivid-pink);
		--color-light: var(--light-pink);
	}

	/* Brand colors */
	.primary {
		--color-dark: var(--dark-primary);
		--color-vivid: var(--vivid-primary);
		--color-light: var(--light-primary);
	}
	.secondary {
		--color-dark: var(--dark-secondary);
		--color-vivid: var(--vivid-secondary);
		--color-light: var(--light-secondary);
	}
	.tertiary {
		--color-dark: var(--dark-tertiary);
		--color-vivid: var(--vivid-tertiary);
		--color-light: var(--light-tertiary);
	}
}