/* ==========================================================================
   Design tokens — the single source of truth for the site's palette.
   RULE: --cta is used EXCLUSIVELY by affiliate CTA buttons (.fp-cta in the
   fp-core plugin). Nothing else on the site may reference it. This is a
   conversion requirement, not a style preference.
   ========================================================================== */

:root {
	/* Core palette */
	--ink: #0B1220;          /* deep navy near-black: header, footer, dark sections */
	--ink-soft: #111B2E;     /* slightly lifted ink for cards on dark */
	--surface: #FFFFFF;      /* content areas */
	--surface-alt: #F6F7F9;  /* off-white section alternation */
	--brand: #0E7A3D;        /* pitch green: links, accents, category labels */
	--brand-dark: #0A5C2E;   /* hover/active green */
	--brand-tint: #E8F3EC;   /* pale green wash for tags/callouts */
	--cta: #F59E0B;          /* AFFILIATE CTA BUTTONS ONLY — see rule above */
	--cta-dark: #D97706;     /* CTA hover */

	/* Neutrals */
	--gray-100: #F3F4F6;
	--gray-200: #E5E7EB;
	--gray-300: #D1D5DB;
	--gray-500: #6B7280;
	--gray-700: #374151;

	/* Text */
	--text: #1F2937;
	--text-muted: var(--gray-500);
	--text-on-dark: #E7EBF2;
	--text-on-dark-muted: #9AA5B5;

	/* Typography */
	--font-display: "Oswald", "Arial Narrow", sans-serif;
	--font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
	--fs-body: 1.0625rem;          /* 17px */
	--lh-body: 1.65;

	/* Layout */
	--content-width: 720px;
	--wide-width: 1160px;
	--radius: 8px;
	--radius-lg: 12px;
	--shadow-card: 0 1px 3px rgba(11, 18, 32, 0.08), 0 4px 14px rgba(11, 18, 32, 0.06);

	/* Imagery: uniform hero/featured treatment (never applied to product images) */
	--img-overlay: linear-gradient(180deg, rgba(11, 18, 32, 0) 35%, rgba(7, 46, 24, 0.62) 100%);
	--img-ratio: 16 / 9;

	/* Focus (WCAG visible focus states) */
	--focus-ring: 3px solid var(--brand);
	--focus-ring-on-dark: 3px solid #7DD3A0;
}