/*
	UTILITIES INDEX
	1. border
	2. color
	3. display
	4. flex
	5. grid
	6. margin
	7. padding
	8. position
	9. text
*/

@layer utilities {
	/* --------------------------------------------------------------------------
	border: adjust border appearance
	-------------------------------------------------------------------------- */
	.radius-md {
		border-radius: var(--border-radius-md);
	}
	.radius-lg {
		border-radius: var(--border-radius-lg);
	}
	.radius-full {
		border-radius: 100%;
	}

	/* --------------------------------------------------------------------------
	color: modify color on the fly
	-------------------------------------------------------------------------- */
	.color {
		/* pick the property you want to affect... */
		&.--text {
			--color-text: var(--property);
		}

		/* ... and map it do a different color */
		&.--use-accent {
			--property: var(--color-accent);
		}
		&.--use-green {
			--property: var(--color-green);
		}
		&.--use-yellow {
			--property: var(--color-yellow);
		}
		&.--use-magenta {
			--property: var(--color-magenta);
		}
		&.--use-invert {
			--property: var(--color-text-invert);
		}
		&.--use-invert-muted {
			--property: var(--color-text-muted-invert);
		}
		&.--use-invert-faint {
			--property: var(--color-text-faint-invert);
		}
	}

	/* --------------------------------------------------------------------------
	display: manipulate the visual display of elements
	-------------------------------------------------------------------------- */
	.block {
		display: block;
	}

	/* --------------------------------------------------------------------------
	flex: simple sub-layouts
	-------------------------------------------------------------------------- */
	.flex {
		display: flex;
		flex-wrap: wrap;
	}

	.gap-xs {
		gap: calc(var(--gutter) / 2);
	}
	.gap-sm {
		gap: calc(var(--gutter) * 0.75);
	}
	.gap-md {
		gap: var(--gutter);
	}
	.gap-lg {
		gap: calc(var(--gutter) * 2);
	}
	.gap-xl {
		gap: calc(var(--gutter) * 3);
	}

	.align-items-center {
		align-items: center;
	}

	.justify-center {
		justify-content: center;
	}
	.justify-between {
		justify-content: space-between;
	}

	.column {
		flex-direction: column;
	}
	.no-wrap {
		flex-wrap: nowrap;
	}

	@media (max-width: 49.999em) {
		.column\@sm {
			flex-direction: column;
		}
	}

	/* --------------------------------------------------------------------------
	margin: adjust spacing between elements
	-------------------------------------------------------------------------- */
	.mt-0 {
		margin-block-start: 0;
	}
	.mt-xs {
		margin-block-start: calc(var(--stack) / 2);
	}
	.mt-sm {
		margin-block-start: calc(var(--stack) * 0.75);
	}
	.mt-md {
		margin-block-start: var(--stack);
	}
	.mt-lg {
		margin-block-start: calc(var(--stack) * 2);
	}
	.mt-xl {
		margin-block-start: calc(var(--stack) * 3);
	}
	.mb-0 {
		margin-block-end: 0;
	}
	.mb-xs {
		margin-block-end: calc(var(--stack) / 2);
	}
	.mb-sm {
		margin-block-end: calc(var(--stack) * 0.75);
	}
	.mb-md {
		margin-block-end: var(--stack);
	}
	.mb-lg {
		margin-block-end: calc(var(--stack) * 2);
	}

	/* --------------------------------------------------------------------------
	padding: adjust space inside elements
	-------------------------------------------------------------------------- */
	.py-lg {
		padding-block: calc(var(--stack) * 2);
	}
	.py-xl {
		padding-block: calc(var(--stack) * 3);
	}
	.py-xxl {
		padding-block: calc(var(--stack) * 4);
	}

	.p-xs {
		padding: calc(var(--gutter) / 2);
	}
	.p-sm {
		padding: calc(var(--gutter) * 0.75);
	}
	.p-md {
		padding: var(--gutter);
	}
	.p-lg {
		padding: calc(var(--gutter) * 2);
	}

	.pt-md {
		padding-block-start: var(--stack);
	}
	.pb-lg {
		padding-block-end: calc(var(--stack) * 2);
	}

	/* --------------------------------------------------------------------------
	grid: override grid-column placement
	-------------------------------------------------------------------------- */
	.bleed {
		grid-column: bleed;
	}
	.prose {
		max-inline-size: 85ch;
	}

	/* --------------------------------------------------------------------------
	position: manipulate position across breakpoints
	-------------------------------------------------------------------------- */
	.h-screen {
		block-size: 100dvh;
	}
	.w-full {
		inline-size: 100%;
	}

	/* --------------------------------------------------------------------------
	text: decouple semantics from presentation
	-------------------------------------------------------------------------- */
	.font-size-xs {
		font-size: var(--font-size-xs);
	}
	.font-size-sm {
		font-size: var(--font-size-sm);
	}
	.font-size-md {
		font-size: var(--font-size-md);
	}
	.font-size-lg {
		font-size: var(--font-size-lg);
	}
	.font-size-xl {
		font-size: var(--font-size-xl);
	}
	.font-size-xxl {
		font-size: var(--font-size-xxl);
	}
	.font-size-xxxl {
		font-size: var(--font-size-xxxl);
	}
	.font-size-poster {
		font-size: var(--font-size-poster);
	}

	.font-weight-medium {
		font-weight: var(--font-weight-medium);
	}
	.font-weight-bold {
		font-weight: var(--font-weight-bold);
	}

	.text-center {
		text-align: center;
	}

	.eyebrow {
		font-size: 0.75rem;
		font-weight: var(--font-weight-medium);
		letter-spacing: 0.12em;
		line-height: 1.33;
		text-transform: uppercase;
		/* muted gray meets WCAG AA on light bg (brand blue was 2.84:1, failing).
		   Eyebrows on dark sections override to --color-text-muted-invert. */
		color: var(--color-text-muted);
	}

	.eyebrow + :is(h1, h2, h3, h4, h5, h6) {
		--flow-space: calc(var(--stack) / 2);
	}

	.line-length-md {
		max-inline-size: var(--line-length-md);
	}
	.line-length-lg {
		max-inline-size: var(--line-length-lg);
	}

	.line-height-xs {
		line-height: var(--line-height-xs);
	}
	.line-height-md {
		line-height: var(--line-height-md);
	}

	.letter-spacing-sm {
		letter-spacing: var(--letter-spacing-sm);
	}
	.letter-spacing-md {
		letter-spacing: var(--letter-spacing-md);
	}
	.letter-spacing-lg {
		letter-spacing: var(--letter-spacing-lg);
	}

	.balance {
		text-wrap: balance;
	}
	@media (hover) and (prefers-reduced-motion: no-preference) {
		.sibling-dim {
			transition: opacity 0.3s ease;
		}

		main:has(.sibling-dim:hover) .sibling-dim:not(:hover) {
			opacity: 0.25;
		}
	}

	.hex-grid-bg {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='12,9 14.6,10.5 14.6,13.5 12,15 9.4,13.5 9.4,10.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/svg%3E");
	}

	.unlisted {
		list-style-type: none;
	}
	.uppercase {
		text-transform: uppercase;
	}
}