/* Design tokens and the .container-* utilities built on them.
   Colours and shadows live in colors.css. */

:root {
	/* Container widths */
	--container-pad: clamp(16px, 4vw, 32px);

	/* Gutter for the rounded panels (hero, footer): 32px down to a 1300px
	   viewport, 12px at 768px. Opt in with .gutter-panel. */
	--container-pad-panel: clamp(12px, 3.7594vw - 16.872px, 32px);
	--width-shell: 1800px;
	--width-shell-w: 1850px;
	--width-shell-n: 1340px;

	/* Content track shared by sections and panels (.container-inset). Not
	   --width-shell-n, which also sizes product and sidebar pages. */
	--width-track: 1440px;
	--width-content: 1400px;
	--width-reading: 75ch;

	/* Spacing. 4px steps in rem; the number is the multiple of 4px. */
	--space-1: 0.25rem; /* 4px */
	--space-2: 0.5rem; /* 8px */
	--space-3: 0.75rem; /* 12px */
	--space-4: 1rem; /* 16px */
	--space-5: 1.25rem; /* 20px */
	--space-6: 1.5rem; /* 24px */
	--space-8: 2rem; /* 32px */
	--space-10: 2.5rem; /* 40px */
	--space-12: 3rem; /* 48px */
	--space-16: 4rem; /* 64px */
	--space-20: 5rem; /* 80px */

	/* Fluid spacing, for gaps that should shrink on a phone. */
	--space-fluid-s: clamp(1rem, 2vw, 1.5rem);
	--space-fluid-m: clamp(1.5rem, 3vw, 2.25rem);
	--space-fluid-l: clamp(1.75rem, 4vw, 4rem);
	--space-section: clamp(2.5rem, 5vw, 4.75rem);
	--space-section-l: clamp(2.75rem, 6vw, 6.25rem);

	/* 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-light: 350;
	--font-normal: 400;
	--font-medium: 500;
	--font-medium-plus: 550;
	--font-mild: 600;
	--font-bold: 700;
	--font-bold-plus: 800;
	--font-black: 900;

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

	/* Letter spacing */
	--tracking-caps: 0.12em;
	--tracking-wide: 0.05em;
	--tracking-tight: -0.03em;
	--tracking-display: -0.05em;

	/* Heading defaults */
	--heading-font-family: var(--font-display);
	--heading-font-weight: var(--font-medium);
	--heading-font-weight-minor: 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 */

	/* Uppercase labels, a step below --text-meta because caps read larger.
	   rem, not em, so they don't compound inside sized parent text. */
	--text-label: 0.875rem; /* 14px */

	/* .eyebrow, one step up from --text-label because it carries no
	   letter-spacing: untracked caps read smaller than tracked ones. */
	--text-label-l: 0.9375rem; /* 15px */

	/* A label that sits beside a control rather than above a heading, e.g.
	   the hero slider's "Paused" flash next to its icon. */
	--text-label-s: 0.8125rem; /* 13px */

	/* Heading sizes */
	--heading-hero: clamp(2.875rem, 2.1rem + 3.8vw, 5.75rem); /* 46px to 92px */
	--heading-xxl: clamp(2rem, 1.5rem + 1.6vw, 3.25rem); /* 32px to 52px */
	--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.25rem; /* 20px */
	--heading-s: 1.125rem; /* 18px */

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

	/* Radius. rem, not em: an em radius follows the element's font-size. */
	--radius-s: 0.25rem; /* 4px */
	--radius: 0.5rem; /* 8px */
	--radius-m: 1rem; /* 16px */
	--radius-l: 2rem; /* 32px */

	/* Pill ends: any value past half the height gives the same shape. */
	--radius-pill: 999px;

	/* Border widths */
	--border-width: 1px;
	--border-width-m: 2px;
	--border-width-l: 3px;
	--border-width-xl: 4px; /* The accent bar on a WooCommerce notice. */

	/* Stacking order. Only for components that overlap at page level; order
	   inside one component (e.g. within #masthead) stays a literal number. */
	--z-below: -1;
	--z-base: 0;
	--z-raised: 1;
	--z-dropdown: 10;
	--z-backdrop: 100; /* Page dimmer under the header, e.g. .mega-overlay. */
	--z-header: 200;
	--z-drawer: 300;
	--z-modal: 400;
	--z-notice: 500; /* Store notice: above everything, including a modal. */

	/* Motion. Reduced motion is handled in base/prefers-reduced-motion.css. */
	--duration-fast: 100ms;
	--duration: 200ms;
	--duration-slow: 300ms;
	--duration-slower: 400ms;
	--ease: ease;
	--ease-in-out: ease-in-out;

	/* Breakpoints. For JS; media queries can't read var(), so type the
	   literal. 782px (WP admin bar) stays out of this list. */
	--bp-s: 640px;
	--bp-m: 768px;
	--bp-l: 900px;
	--bp-xl: 1280px;
	--bp-xxl: 1800px;
}

@media (min-width: 768px) {
	:root {
		--text-body-l: 1.263158em; /* 24px */
		--heading-m: 1.5rem; /* 24px */
		--heading-s: 1.1875rem; /* 19px */
	}
}

/* Phones: a smaller anchor shrinks the em-based body scale. UI and meta
   sizes stay pinned (iOS zooms focused inputs under 16px). */
@media (max-width: 767px) {
	:root {
		--text-size-base: 1.125em; /* 18px */
		--text-ui: 0.888889em; /* 16px */
		--text-ui-l: 0.944444em; /* 17px */
		--text-meta: 0.833333em; /* 15px */
	}
}

.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;
}

/* Insets a wide panel's contents to the content track. Goes on a child of
   the wide element; --inset-floor sets a minimum padding. */
.container-inset {
	padding-inline: max(var(--inset-floor, 0px), calc((100% - min(100%, var(--width-track))) / 2));
}

.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;
}

/* On the section around a .container-*: switches it to the panel gutter. */
.gutter-panel {
	--container-pad: var(--container-pad-panel);
}