/*
 * Design tokens — ported 1:1 from the Skillet & Spoon design system
 * (_ds/skillet-spoon-design-system-.../tokens/*.css) so the production site
 * matches the approved prototype exactly. Do not hand-edit values here
 * without updating the source design system too.
 */
:root {
	/* --- Base palette: greens (the brand's spine) --- */
	--green-900: #22350F; --green-800: #2C4514; --green-700: #3C5A1D; --green-600: #4A6D2B; --green-500: #5F8639;
	--green-400: #7CA254; --green-300: #A6C183; --green-200: #CDDDB4; --green-100: #E4EDD2; --green-50: #F1F5E7;

	/* --- Base palette: warm neutrals (paper, linen, stone) --- */
	--cream-50: #FEFDFA; --cream-100: #FBF8F1; --cream-200: #F5F0E4; --cream-300: #EBE4D3;
	--stone-400: #D8D2C2; --stone-500: #B4AE9C; --stone-600: #8A8574; --stone-700: #5C5849;
	--ink-800: #3A382F; --ink-900: #26251F;

	/* --- Base palette: accents --- */
	--sun-500: #F3C64A; --sun-400: #F7D571; --sun-300: #FBE6A8; --sun-600: #E0AE2C;
	--tomato-500: #C4553A; --berry-500: #8E4361; --carrot-500: #E08A3C;

	/* --- Semantic: text --- */
	--text-body: var(--ink-800); --text-strong: var(--ink-900); --text-muted: var(--stone-600);
	--text-brand: var(--green-700); --text-on-dark: var(--cream-100); --text-on-accent: var(--green-900);
	--text-link: var(--green-600); --text-link-hover: var(--green-800);

	/* --- Semantic: surfaces --- */
	--surface-page: var(--cream-50); --surface-card: #FFFFFF; --surface-sunken: var(--cream-200);
	--surface-sage: var(--green-50); --surface-sage-deep: var(--green-100); --surface-brand: var(--green-700);
	--surface-accent: var(--sun-500); --surface-accent-soft: var(--sun-300);

	/* --- Semantic: lines --- */
	--border-hairline: var(--cream-300); --border-default: var(--stone-400);
	--border-strong: var(--green-700); --border-accent: var(--sun-500);

	/* --- Semantic: interactive --- */
	--action-primary: var(--green-700); --action-primary-hover: var(--green-800); --action-primary-press: var(--green-900);
	--action-secondary-border: var(--green-700); --action-accent: var(--sun-500); --action-accent-hover: var(--sun-600);
	--focus-ring: var(--green-500);

	/* --- Semantic: diet / nutrition chips --- */
	--diet-vegan: var(--green-600); --diet-vegetarian: var(--green-500); --diet-protein: var(--tomato-500); --diet-calorie: var(--stone-600);

	/* --- Type families --- */
	--font-wordmark: "Cinzel", Georgia, serif;
	--font-serif-display: "Cormorant Garamond", Georgia, serif;
	--font-script: "Sacramento", cursive;
	--font-hand: "Caveat", cursive;
	--font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
	--font-body: var(--font-sans);

	/* --- Type sizes --- */
	--text-3xs: 11px; --text-2xs: 12px; --text-xs: 13px; --text-sm: 14px; --text-md: 16px; --text-lg: 18px;
	--text-xl: 21px; --text-2xl: 26px; --text-3xl: 32px; --text-4xl: 40px; --text-5xl: 54px; --text-6xl: 68px; --text-7xl: 84px;

	/* --- Type weights --- */
	--weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

	/* --- Line heights --- */
	--leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65;

	/* --- Tracking --- */
	--tracking-caps-wide: 0.18em; --tracking-caps: 0.1em; --tracking-normal: 0.01em; --tracking-tight: -0.01em;

	/* --- Composed type roles --- */
	--type-hero: var(--weight-semibold) var(--text-7xl)/var(--leading-tight) var(--font-sans);
	--type-hero-script: var(--weight-regular) var(--text-7xl)/0.9 var(--font-script);
	--type-display: var(--weight-bold) var(--text-4xl)/var(--leading-snug) var(--font-serif-display);
	--type-section: var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-sans);
	--type-card-title: var(--weight-semibold) var(--text-sm)/var(--leading-snug) var(--font-sans);
	--type-body: var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-sans);
	--type-small: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
	--type-label: var(--weight-medium) var(--text-2xs)/1 var(--font-sans);
	--type-note: var(--weight-regular) var(--text-2xl)/1.1 var(--font-hand);

	/* --- Spacing + radii --- */
	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
	--space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
	--radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px;
	--radius-pill: 999px; --radius-circle: 50%;
	--container-max: 1180px; --container-pad: 32px;
	--section-pad-y: 64px; --section-pad-y-lg: 88px;
	--control-h-sm: 32px; --control-h-md: 40px; --control-h-lg: 48px;

	/* --- Elevation --- */
	--shadow-none: none;
	--shadow-hairline: 0 0 0 1px var(--border-hairline);
	--shadow-card: 0 1px 2px rgba(38,37,31,.05), 0 6px 18px -8px rgba(38,37,31,.12);
	--shadow-card-hover: 0 2px 4px rgba(38,37,31,.06), 0 16px 32px -12px rgba(38,37,31,.18);
	--shadow-raised: 0 10px 30px -10px rgba(34,53,15,.28);
	--shadow-inset-image: inset 0 0 0 1px rgba(38,37,31,.06);
	--overlay-scrim: linear-gradient(to top, rgba(38,37,31,.55), rgba(38,37,31,0) 60%);
	--blur-panel: saturate(120%) blur(10px);

	/* --- Motion --- */
	--ease-standard: cubic-bezier(.2,.7,.3,1);
	--ease-out-soft: cubic-bezier(.16,1,.3,1);
	--ease-in-out: cubic-bezier(.65,0,.35,1);
	--dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; --dur-scroll: 600ms;
	--transition-control: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
	--transition-lift: transform var(--dur-base) var(--ease-out-soft), box-shadow var(--dur-base) var(--ease-out-soft);
	--lift-hover: translateY(-2px);
	--press-scale: scale(.98);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--lift-hover: none;
		--press-scale: none;
	}
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}