/**
 * COMPONENTS — entry point.
 *
 * Individual component files live in components/ and are enqueued separately
 * (see dl_component_styles() in inc/enqueue.php). This file holds only things
 * shared by every component.
 *
 * Anything here MUST be inside @layer components, or it will outrank utilities.
 */

@layer components {
	/*
	 * Emitted by dl_accent_text() wherever an editor wraps words in *asterisks*.
	 * Global on purpose — the design accents part of nearly every heading, and
	 * scoping this per section is how it silently stops working on the next one.
	 */
	.is-accent {
		color: var(--clr-accent);
		font-weight: var(--weight-bold);
	}

	/* Shared by every section band. */
	.section {
		position: relative;
		padding-block: var(--section-space);
	}
	.section--tight { padding-block: var(--space-3xl); }
	.section--loose { padding-block: var(--space-5xl); }

	/* Dark bands. Pairs with [data-theme="dark"] to flip the text tokens. */
	.section--dark {
		background-color: var(--clr-bg-inverse);
		color: var(--clr-text-inverse);
	}
	.section--alt { background-color: var(--clr-bg-alt); }
}