/**
 * Custom CSS Custom Properties / Tokens (variables.css)
 */

:root {
	--terracotta: #C45824;
	--terra: #C45824;
	--burnt-sienna: #8B3A1A;
	--terra-deep: #8B3A1A;
	--terra-glow: #E8743B;
	--cocoa-ink: #2B1810;
	--ink: #2B1810;
	--ink-soft: #4A2E20;
	--cream: #F5EDE2;
	--ivory: #FAF4EA;
	--paper: #EFE3D2;
	--sand: #E8DCC8;
	--clay-mist: #C9B89A;
	--muted: #7A5A47;
	--ochre: #D89A4E;
	--moss: #5C6B3F;

	--font-display: 'Bebas Neue', sans-serif;
	--font-serif: 'Playfair Display', Georgia, serif;
	--font-sans: 'Inter', sans-serif;
	--font-label: 'Oswald', sans-serif;

	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.15rem;
	--text-lg: 1.5rem;
	--text-xl: 2.2rem;
	--text-2xl: 3.5rem;
	--text-3xl: 5rem;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;
	--space-16: 64px;
	--space-24: 96px;
	--space-32: 128px;

	--grid-max-width: 1400px;
	--grid-gutter: 64px;
	--grid-gutter-mobile: 24px;

	--border-radius-sm: 2px;
	--border-radius: 4px;
	--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
	--shadow-md: 0 8px 32px -16px rgba(139, 58, 26, 0.18);
	--shadow-lg: 0 30px 60px -30px rgba(139, 58, 26, 0.35);

	--transition-fast: 240ms;
	--transition-base: 400ms;
	--transition-slow: 600ms;
}