@import "base.css";

@layer variants {
	/* Font-family variants. */
	.body {
		font-family: var(--font-body);
	}
	.code {
		font-family: var(--font-code);
	}
	.monospace {
		font-family: var(--font-mono);
	}
	.sans {
		font-family: var(--font-sans);
	}
	.serif {
		font-family: var(--font-serif);
	}

	/* Font-size variants (prefixed `size-` to avoid clashing with Spacing/Padding/Gap scales). */
	.size-xxsmall {
		font-size: var(--size-xxsmall);
		line-height: var(--leading);
	}
	.size-xsmall {
		font-size: var(--size-xsmall);
		line-height: var(--leading);
	}
	.size-small {
		font-size: var(--size-small);
		line-height: var(--leading);
	}
	.size-normal {
		font-size: var(--size-normal);
		line-height: var(--leading);
	}
	.size-large {
		font-size: var(--size-large);
		line-height: var(--leading);
	}
	.size-xlarge {
		font-size: var(--size-xlarge);
		line-height: var(--leading);
	}
	.size-xxlarge {
		font-size: var(--size-xxlarge);
		line-height: var(--leading);
	}

	/* Text-colour variants — set `color` from a step of the 5-step scale.
	 * Text block elements (Paragraph, Heading, etc.) don't set `color` themselves; they inherit from
	 * the page baseline (`--color-dark`). Apply one of these on a container (Block, Panel) to tint
	 * all the text inside it via inheritance, or on an individual text block to tint just that one. */
	.black {
		color: var(--color-black);
	}
	.dark {
		color: var(--color-dark);
	}
	.vivid {
		color: var(--color-vivid);
	}
	.light {
		color: var(--color-light);
	}
	.white {
		color: var(--color-white);
	}
}