/* ==========================================================================
   NutriFoodGuide — design tokens
   The single source of truth for colour, type, space, radius and shadow.
   Change values here; never hardcode them in component rules.
   ========================================================================== */

:root {
	/* --- Colour ---------------------------------------------------------
	   A warm paper ground with a deep forest ink. Amber appears only where
	   something is genuinely "enhancing"; it is a signal, not decoration. */
	--nfg-canvas: #FAF8F3;
	--nfg-panel: #F1F0E8;
	--nfg-panel-warm: #F4F1E9;
	--nfg-surface: #FFFFFF;

	--nfg-forest: #22402C;
	--nfg-forest-deep: #16281D;
	--nfg-moss: #5C7A4E;
	--nfg-sage: #C9D6BD;
	--nfg-sage-light: #E4EBDC;

	--nfg-amber: #C77F1A;          /* decorative fills and rules only */
	--nfg-amber-text: #8E570F;     /* text-safe amber: 5.6:1 on canvas, 4.9:1 on amber-soft */
	--nfg-amber-soft: #F6E7CC;
	--nfg-clay: #A8543A;
	--nfg-clay-soft: #F3E1DA;
	--nfg-violet-soft: #E7E2EE;

	--nfg-ink: #1E211B;
	--nfg-muted: #575C51;
	--nfg-line: #E1DDD1;
	--nfg-line-strong: #CFCABA;

	--nfg-focus: #1B5E3A;

	/* --- Typography ---------------------------------------------------- */
	--nfg-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
	--nfg-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--nfg-font-utility: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--nfg-text-xs: 0.75rem;
	--nfg-text-sm: 0.8125rem;
	--nfg-text-base: 1.0625rem;
	--nfg-text-md: 1.125rem;
	--nfg-text-lg: 1.25rem;
	--nfg-text-xl: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
	--nfg-text-2xl: clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem);
	--nfg-text-3xl: clamp(2.1rem, 1.4rem + 3.2vw, 3.5rem);

	--nfg-leading-tight: 1.12;
	--nfg-leading-snug: 1.3;
	--nfg-leading-normal: 1.65;

	--nfg-tracking-wide: 0.09em;

	/* --- Space ---------------------------------------------------------- */
	--nfg-space-1: 0.25rem;
	--nfg-space-2: 0.5rem;
	--nfg-space-3: 0.75rem;
	--nfg-space-4: 1rem;
	--nfg-space-5: 1.5rem;
	--nfg-space-6: 2rem;
	--nfg-space-7: 3rem;
	--nfg-space-8: clamp(3.5rem, 2rem + 6vw, 6rem);

	/* --- Layout --------------------------------------------------------- */
	--nfg-container: 1200px;
	--nfg-reading: 760px;
	--nfg-gutter: clamp(1.15rem, 4vw, 2.5rem);

	/* --- Radius --------------------------------------------------------- */
	--nfg-radius-sm: 4px;
	--nfg-radius-md: 10px;
	--nfg-radius-lg: 18px;
	--nfg-radius-pill: 999px;

	/* --- Elevation (restrained by design) -------------------------------- */
	--nfg-shadow-sm: 0 1px 2px rgba(30, 33, 27, 0.04);
	--nfg-shadow-md: 0 2px 10px rgba(30, 33, 27, 0.05);
	--nfg-shadow-lg: 0 8px 30px rgba(30, 33, 27, 0.07);

	/* --- Motion ---------------------------------------------------------- */
	--nfg-ease: cubic-bezier(0.2, 0.6, 0.25, 1);
	--nfg-duration: 180ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--nfg-duration: 0ms;
	}
}