/*
 * Design tokens.
 *
 * Global custom properties for widths, fonts, text sizes, line heights and
 * radii, plus the .container-* width utilities built on those tokens.
 * Color tokens live in colors.css.
 */

:root {
	/* Container widths */
	--container-pad: clamp(16px, 4vw, 32px);
	--width-shell: 1800px;
	--width-shell-w: 1850px;
	--width-shell-n: 1340px;
	--width-content: 1400px;
	--width-reading: 75ch;

	/* Font families */
	--font-base: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
	--font-display: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
	--font-mono: ui-monospace, monospace;

	/* Font weights */
	--font-normal: 400;
	--font-medium: 500;
	--font-mild: 600;
	--font-bold: 700;
	--font-black: 900;

	/* Line heights */
	--leading-large: 1.75;
	--leading: 1.55;
	--leading-short: 1.35;
	--leading-slim: 1.2;
	--leading-flat: 1;

	/* Heading defaults */
	--heading-font-family: var(--font-display);
	--heading-font-weight: var(--font-mild);
	--heading-line-height: 1.15;

	/* Text sizes */
	--text-size-base: 1.1875em; /* 19px */
	--text-body: 1em; /* 19px */
	--text-body-l: 1.105263em; /* 21px */
	--text-body-m: 0.894737em; /* 17px */
	--text-body-s: 0.842105em; /* 16px */
	--text-body-xs: 0.789474em; /* 15px */


	--text-ui: var(--text-body-s); /* 16px */
	--text-ui-l: var(--text-body-m); /* 17px */
	--text-meta: var(--text-body-xs); /* 15px */

	/* Heading sizes */
	--heading-xl: clamp(2rem, 1.76rem + 0.78vw, 2.5rem); /* 32px to 40px */
	--heading-l: clamp(1.625rem, 1.46rem + 0.52vw, 2rem); /* 26px to 32px */
	--heading-m: 1.105263em; /* 21px */
	--heading-s: 1em; /* 19px */

	/* Caption sizes */
	--caption-xl: 1.105263rem; /* 21px */
	--caption-l: 1.105263rem; /* 21px */
	--caption-m: 1.1875rem; /* 19px */

	/* Reading measures */
	--measure-xs: 20ch;
	--measure-s: 35ch;
	--measure-m: 45ch;
	--measure: 65ch;
	--measure-l: 75ch;

	/* Radius */
	--radius-s: 0.25em;
	--radius: 0.5em;
	--radius-m: 1em;
	--radius-l: 2em;

	/* Small UI text in WooCommerce style */
	--size-small: var(--text-body-s);
	--fluid-h2-wc: 1em;
	--wp--preset--font-size--small: var(--text-ui);
	--wp--preset--font-size--medium: var(--text-body-l);
}

@media (min-width: 768px) {
	:root {
		--text-body-l: 1.263158em; /* 24px */
		--heading-m: 1.263158em; /* 24px */

		/* Caption sizes */
		--caption-xl: 1.421053rem; /* 27px */
		--caption-l: 1.263158rem; /* 24px */
		--caption-m: 1.1875rem; /* 19px */
	}
}

.container-shell {
	inline-size: min(100% - var(--container-pad) * 2, var(--width-shell));
	margin-inline: auto;
}

.container-shell-w {
	inline-size: min(100% - var(--container-pad) * 2, var(--width-shell-w));
	margin-inline: auto;
}

.container-shell-n {
	inline-size: min(100% - var(--container-pad) * 2, var(--width-shell-n));
	margin-inline: auto;
}

.container-content {
	inline-size: min(100% - var(--container-pad) * 2, var(--width-content));
	margin-inline: auto;
}

.container-reading {
	inline-size: min(100% - var(--container-pad) * 2, var(--width-reading));
	margin-inline: auto;
}