/**
 * Merchaus design tokens.
 *
 * Ported from src/styles/configuration/_variables.scss + _utils.scss of the
 * Astro site. The original scaled everything through a vw-based root
 * font-size; here the root stays at the browser default and the fluid scale
 * lives in three units instead:
 *
 *   --u    the Sass $unit (0.520833vw = 10px on the 1920 design), clamped to
 *          its 768px/2560px viewport values; remapped to $munit (10px @375)
 *          under 768px — same numbers the Sass produced at every width
 *   --rem  what a literal `1rem` resolved to in the old fluid-root system
 *          (1.6 × $unit); ported component CSS uses calc(N * var(--rem))
 *   --du   the fixed $dunit (10px) used by ≥1513px mixin branches
 *
 * Token multipliers below mirror _variables.scss exactly, including the
 * mobile-only tokens (--t50, --t19, --t15, --t13, --t11) and the re-ranked
 * mobile scale. Don't "fix" apparent oddities — they're the design.
 */

@font-face {
	font-family: 'Monument';
	src: url('../fonts/ABCMonumentGrotesk-Bold.woff2') format('woff2'),
		url('../fonts/ABCMonumentGrotesk-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--body-font: 'Monument', sans-serif;

	--black: #000000;
	--offwhite: #f8f8f0;
	--white: #ffffff;
	--yellow: #e5c33c;
	--blue: #6398f8;
	--red: #962f17;
	--green: #00A884;
	--dark: #44566C;
	--grey: #E6EBF2;
	--gallery-active: #FF4633;

	--u: clamp(0.25rem, 0.520833333333vw, 0.833333rem);
	--rem: calc(1.6 * var(--u));
	--du: 0.625rem;

	--radius: var(--rem);
	--border-size: 1px;
	--border-color: var(--black);

	--section-width: 100%;
	--section-padding: calc(2 * var(--u));
	--section-padding-half: calc(1 * var(--u));

	--t100: calc(10 * var(--u));
	--t85: calc(8.5 * var(--u));
	--t64: calc(6.4 * var(--u));
	--t48: calc(4.8 * var(--u));
	--t42: calc(4.2 * var(--u));
	--t40: calc(4 * var(--u));
	--t36: calc(3.6 * var(--u));
	--t34: calc(3.4 * var(--u));
	--t32: calc(3.2 * var(--u));
	--t30: calc(3 * var(--u));
	--t24: calc(2.4 * var(--u));
	--t20: calc(2 * var(--u));
	--t18: calc(1.8 * var(--u));
	--t16: calc(1.6 * var(--u));
	--t14: calc(1.4 * var(--u));
	--t12: calc(1.2 * var(--u));
	--t10: calc(1 * var(--u));
}

@media (max-width: 767px) {
	:root {
		--u: clamp(0.533333rem, 2.666666666667vw, 1.278333rem);

		--t100: calc(5 * var(--u));
		--t85: calc(6 * var(--u));
		--t64: calc(6.4 * var(--u));
		--t50: calc(3.5 * var(--u));
		--t48: calc(3.4 * var(--u));
		--t42: calc(3.2 * var(--u));
		--t40: calc(3 * var(--u));
		--t36: calc(2.4 * var(--u));
		--t34: calc(3 * var(--u));
		--t32: calc(2.4 * var(--u));
		--t30: calc(2.6 * var(--u));
		--t24: calc(2 * var(--u));
		--t20: calc(2 * var(--u));
		--t19: calc(1.8 * var(--u));
		--t18: calc(1.6 * var(--u));
		--t16: calc(1.1 * var(--u));
		--t15: calc(1.5 * var(--u));
		--t14: calc(1.4 * var(--u));
		--t13: calc(1.3 * var(--u));
		--t11: calc(1.1 * var(--u));
		--t10: calc(1 * var(--u));
	}
}