/**
 * MAIN
 *
 * The entry point: layer order, imports, and every token that is not a colour. Colours live in
 * theme.css so that the look of the site travels in one file.
 *
 * Layer order is declared up front rather than left to source order. Two things depend on it:
 * `layout` sits after `utilities`, so a page rule can take a different width lane without out-
 * specifying the lane defaults; and `theme` sits last, so a colour can never be outranked by a
 * structural selector somewhere else — which is what makes the theme swappable.
 *
 * @import must precede every ordinary rule, so :root below the imports is the only legal place for
 * it. It has no cascade consequence: var() resolves at computed-value time, not at parse time.
 */

@layer reset, base, utilities, layout, forms, theme;

@import 'reset.css' layer(reset);
@import 'base.css' layer(base);
@import 'utilities.css' layer(utilities);
@import 'layout.css' layer(layout);
@import 'forms.css' layer(forms);
@import 'theme.css' layer(theme);

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css") layer(base);

:root {
	--banner-height: 80px;		/* half the height of the logo */
	--logo-height: 144px;
	--gap-between-banner-and-logo: calc(var(--logo-height) - var(--banner-height));
	--nav-underline: calc(var(--spacing-xs) / 2);

	/* The three width lanes. `text` is the reading column, `wide` the room a card grid needs, and
	   the rest of the viewport is `full`. --lane-step is the gutter between text and wide. */
	--padding-inline: 1rem;
	--lane-text: 900px;
	--lane-wide: 1200px;
	--lane-step: calc((var(--lane-wide) - var(--lane-text)) / 2);

	--spacing-xs: 0.5rem;
	--spacing-s: 1.5rem;
	--spacing-m: 2.5rem;
	--spacing-l: 4rem;
	--spacing-xl: 5rem;

	--padding-xs: clamp(0.5rem, 1.5%, 1rem);
	--padding-s: clamp(1rem, 3%, 1.5rem);
	--padding-m: clamp(1.5rem, 6%, 3rem);
	--padding-l: clamp(3rem, 12%, 6rem);

	--block-flow-xs: min(1rem, 2vh);
	--block-flow-s: min(2rem, 4vh);
	--block-flow-m: min(4rem, 8vh);
	--block-flow-l: min(8rem, 16vh);
	--block-flow-xl: min(16rem, 32vh);

	--layout-gap-s: clamp(1rem, 3vmax, 1.5rem);
	--layout-gap-m: clamp(1.5rem, 6vmax, 3rem);
	--layout-gap-l: clamp(3rem, 8vmax, 4rem);

	--step--1: clamp(0.78rem, calc(0.75rem + 0.12vw), 0.85rem);
	--step-0: clamp(0.88rem, calc(0.81rem + 0.31vw), 1.06rem);
	--step-1: clamp(0.98rem, calc(0.87rem + 0.57vw), 1.33rem);
	--step-2: clamp(1.11rem, calc(0.92rem + 0.92vw), 1.66rem);
	--step-3: clamp(1.25rem, calc(0.97rem + 1.38vw), 2.08rem);
	--step-4: clamp(1.40rem, calc(1.00rem + 1.99vw), 2.59rem);
	--step-5: clamp(1.58rem, calc(1.02rem + 2.78vw), 3.24rem);
}