/* azoth design tokens — v2, Peaked-derived design language */

@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk-v12-latin-regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk-v12-latin-500.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk-v12-latin-600.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk-v12-latin-700.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

:root {
	/* Color */
	--bg: #ffffff;            /* page bg — pure white */
	--card: #f6f8fa;          /* section card bg — faint frost */
	--white: #ffffff;
	--ink: #131417;           /* near-black text */
	--gray: #6b7078;          /* secondary text */
	--line: #e4e7ea;          /* hairline borders */
	--accent: #49617f;        /* azoth slate blue — price blocks, footer, chips */
	--accent-deep: #35495f;   /* darker shade for gradients */
	--accent-tint: #e8eef5;   /* pale blue chip tint */

	/* Aliases kept for existing rules */
	--green-deep: var(--accent);
	--green-tint: var(--accent-tint);
	--green-text: var(--accent);

	/* Type */
	--font-display: "Hanken Grotesk", "Helvetica Neue", -apple-system, sans-serif;
	--font-body: "Hanken Grotesk", "Helvetica Neue", -apple-system, sans-serif;

	--text-xs: 0.72rem;
	--text-s: 0.875rem;
	--text-m: 1rem;
	--text-l: 1.2rem;
	--text-xl: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
	--text-2xl: clamp(2.2rem, 1.4rem + 3.6vw, 4.2rem);
	--text-hero: clamp(3rem, 1.6rem + 7vw, 7.5rem);

	--tracking-tight: -0.025em;
	--tracking-wide: 0.14em;

	/* Space */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4.5rem;
	--space-9: 7rem;

	/* Shape & motion */
	--radius-s: 10px;
	--radius-m: 16px;
	--radius-l: 24px;
	--radius-pill: 999px;
	--shadow-card: 0 1px 2px rgb(19 21 19 / 0.04), 0 10px 30px rgb(19 21 19 / 0.06);
	--shadow-drawer: -24px 0 48px rgb(19 21 19 / 0.2);
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);

	--container: 90rem;
	--container-narrow: 46rem;
	--gutter: clamp(0.75rem, 1.2vw, 1.25rem);
}