@font-face {
	font-family: "Nunito";
	font-style: normal;
	font-weight: 600 900;
	font-display: swap;
	src: url("../fonts/nunito-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
}

:root {
	/* Brand colours, sampled from the Pawtner In Crime logo (exact values) */
	--brand-teal: #015154;
	--brand-orange: #db591e;
	--brand-cream: #f9f5eb;

	/* Color */
	--color-bg: #fffaf3;
	--color-surface: #ffffff;
	--color-tint: var(--brand-cream);
	--color-text: #2b2a33;
	--color-muted: #5f5c6d;
	/* Primary is the logo orange darkened (same hue and saturation) until white text on it reaches 4.6:1;
	   the exact logo orange (--brand-orange, 3.8:1) is used for large type and decoration only. */
	--color-primary: #c5501b;
	--color-primary-dark: #ac4618;
	--color-primary-soft: #fae5db;
	--color-accent: var(--brand-teal);
	--color-accent-dark: #013b3e;
	--color-accent-soft: #d9e8e8;
	--color-brand-orange: var(--brand-orange);
	--color-sale: #c0264b;
	--color-border: #eadfd0;
	--color-on-primary: #ffffff;
	--color-ink: #1d1b24;
	--color-ink-soft: #2b2a33;
	--color-gold: #e0a100;
	--color-footer-bg: #2b2a33;
	--color-footer-text: #cfcbd9;
	--color-footer-heading: #8fd3d6;
	--color-footer-line: rgba(255, 255, 255, 0.12);

	/* Type */
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--font-heading: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	--text-2xl: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem);

	/* Space and shape */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 3rem;
	--space-6: 4.5rem;
	--radius: 0.9rem;
	--radius-sm: 0.5rem;
	--radius-pill: 999px;
	--container: 1200px;
	--gutter: 1rem;
	--shadow: 0 6px 24px rgba(43, 42, 51, 0.08);
	--shadow-lg: 0 24px 60px rgba(43, 42, 51, 0.16);
	--radius-lg: 1.5rem;
	--header-h: 68px;
}