/* ==========================================================================
   DPS design tokens — source of truth for colour, type, space, motion.
   Loaded first. Nothing here targets a component.
   ========================================================================== */

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
	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;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	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;
}
@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Colour — shell */
	--dps-ink: #0a0d12;
	--dps-ink-2: #11161f;
	--dps-ink-3: #1a2130;
	--dps-paper: #f5efe6;
	--dps-white: #ffffff;
	--dps-text: #1a1714;
	--dps-text-invert: #f5f1ea;
	--dps-muted: #6b6560;
	--dps-muted-invert: #a8a29a;
	--dps-lime: #c6f135;
	--dps-cyan: #4cc9f0;
	--dps-border: #e8e2d8;
	--dps-border-dark: rgba(255, 255, 255, 0.12);
	--dps-success: #15803d;
	--dps-warning: #b45309;
	--dps-danger: #b91c1c;
	--dps-whatsapp: #25d366;

	/* Colour — semantic */
	--dps-bg: var(--dps-paper);
	--dps-surface: var(--dps-white);
	--dps-surface-dark: var(--dps-ink-2);
	--dps-fg: var(--dps-text);
	--dps-fg-muted: var(--dps-muted);
	--dps-fg-invert: var(--dps-text-invert);
	--dps-fg-muted-invert: var(--dps-muted-invert);
	--dps-accent: var(--dps-lime);
	--dps-accent-fg: var(--dps-ink);
	--dps-focus: var(--dps-cyan);

	/* Type */
	--dps-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
	--dps-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

	--dps-fs-display: clamp(2.5rem, 5vw, 4.25rem);
	--dps-fs-h2: clamp(1.75rem, 3vw, 2.5rem);
	--dps-fs-h3: clamp(1.25rem, 1.6vw, 1.5rem);
	--dps-fs-lead: clamp(1.0625rem, 1.1vw, 1.25rem);
	--dps-fs-body: 1rem;
	--dps-fs-sm: 0.875rem;
	--dps-fs-xs: 0.8125rem;

	--dps-lh-display: 1.0;
	--dps-lh-heading: 1.12;
	--dps-lh-body: 1.7;
	--dps-ls-display: -0.035em;
	--dps-ls-heading: -0.025em;
	--dps-ls-caps: 0.08em;

	/* Space */
	--dps-1: 4px;
	--dps-2: 8px;
	--dps-3: 12px;
	--dps-4: 16px;
	--dps-5: 20px;
	--dps-6: 24px;
	--dps-8: 32px;
	--dps-10: 40px;
	--dps-12: 48px;
	--dps-16: 64px;
	--dps-20: 80px;
	--dps-24: 96px;
	--dps-section: clamp(96px, 12vw, 192px);
	--dps-container: 1240px;
	--dps-gutter: clamp(16px, 4vw, 32px);
	--dps-header: 64px;
	--dps-header-desk: 76px;
	--dps-announce: 34px;

	/* Radius */
	--dps-r-sm: 8px;
	--dps-r: 10px;
	--dps-r-card: 12px;
	--dps-r-lg: 16px;
	--dps-r-pill: 999px;

	/* Elevation */
	--dps-shadow-sm: 0 1px 2px rgba(10, 13, 18, 0.05);
	--dps-shadow: 0 4px 16px rgba(10, 13, 18, 0.07);
	--dps-shadow-lift: 0 8px 24px rgba(10, 13, 18, 0.09);
	--dps-shadow-dark: 0 10px 30px rgba(0, 0, 0, 0.35);

	/* Motion */
	--dps-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
	--dps-t-fast: 150ms;
	--dps-t: 180ms;
	--dps-t-slow: 220ms;

	/* Layers */
	--dps-z-header: 100;
	--dps-z-drawer: 200;
	--dps-z-overlay: 300;
}

@media (min-width: 1024px) {
	:root {
		--dps-header: var(--dps-header-desk);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dps-t-fast: 0ms;
		--dps-t: 0ms;
		--dps-t-slow: 0ms;
	}
}