/* Montserrat (titles), one variable file for weights 600 to 800, hosted locally */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url('../fonts/montserrat-latin-600-700-800.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* XZOTIK design system. Single source for colors, type, radius, shadows and motion.
   Palette: orange and deep orange as the only accents, black and gray for text, cream and sand for surfaces. */
:root {
	/* Colors */
	--color-orange: #EF7D00;
	--color-orange-dark: #B85C00;
	--color-black: #1D1D1B;
	--color-dark: #111111;
	--color-gray: #575756;
	--color-gray-light: #8A8A8A;
	--color-cream: #FBF8F3;
	--color-sand: #F6EFE6;
	--color-white: #FFFFFF;

	/* Typography */
	--font-regular: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-body: 'Avenir', 'Montserrat', Arial, sans-serif;
	--font-display: 'Montserrat', 'Avenir', Arial, sans-serif;
	--text-base: 16px;
	--text-h1: clamp(42px, 5vw, 76px);
	--text-h2: clamp(34px, 4vw, 58px);
	--text-h3: clamp(22px, 2vw, 30px);

	/* Radius */
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 18px;
	--radius-pill: 999px;

	/* Motion */
	--transition-fast: 200ms ease;
	--transition-base: 300ms ease;
	--transition-slow: 700ms cubic-bezier(.2, .65, .2, 1);

	/* Shadows */
	--shadow-sm: 0 4px 20px rgba(0, 0, 0, .06);
	--shadow-md: 0 12px 40px rgba(0, 0, 0, .10);

	/* Layout */
	--xz-wrap: 1280px;
	--xz-container: 1230px;
	--xz-gutter: 19px;
	--xz-s1: 4px;
	--xz-s2: 8px;
	--xz-s3: 16px;
	--xz-s4: 24px;
	--xz-s5: 40px;
	--xz-s6: 64px;
	--xz-s7: 96px;

	/* Legacy names used by older rules, kept as aliases of the system above */
	--xz-orange: var(--color-orange);
	--xz-orange-deep: var(--color-orange-dark);
	--xz-charcoal: var(--color-black);
	--xz-grey: var(--color-gray);
	--xz-sand: var(--color-sand);
	--xz-cream: var(--color-cream);
	--xz-white: var(--color-white);
	--xz-font: var(--font-body);
	--xz-display: var(--font-display);
	--xz-text: var(--text-base);
	--xz-h1: var(--text-h1);
	--xz-h2: var(--text-h2);
	--xz-h3: var(--text-h3);
	--xz-radius: var(--radius-sm);
	--xz-shadow: var(--shadow-md);
	--xz-ease: cubic-bezier(.2, .65, .2, 1);
	--xz-fast: 200ms;
	--xz-base: 300ms;
}