/**
 * RecipesJV — CSS Custom Properties
 * All design tokens defined here. Import order: first after reset.
 */

:root {
	/* ── Brand Colors ─────────────────────────────────── */
	--color-primary:      #E8192C; /* brand red — CTAs, accents, badges */
	--color-primary-dark: #C00020; /* hover / pressed state */
	--color-text:         #1A1A1A; /* near-black body text */
	--color-text-muted:   #6B6B6B; /* captions, secondary text */
	--color-bg:           #FAFAF8; /* warm off-white page background */
	--color-bg-alt:       #F4F1EE; /* section alternate background */
	--color-border:       #E8E3DC; /* subtle warm borders */
	--color-white:        #FFFFFF;
	--color-dark-banner:  #1A0A0A; /* near-black dark sections (deep red-tinted) */

	/* ── Typography ───────────────────────────────────── */
	--font-heading: 'Poppins', sans-serif;
	--font-body:    'Inter', sans-serif;

	--text-xs:   0.75rem;   /*  12px */
	--text-sm:   0.875rem;  /*  14px */
	--text-base: 1rem;      /*  16px */
	--text-lg:   1.125rem;  /*  18px */
	--text-xl:   1.25rem;   /*  20px */
	--text-2xl:  1.5rem;    /*  24px */
	--text-3xl:  1.875rem;  /*  30px */
	--text-4xl:  2.25rem;   /*  36px */
	--text-5xl:  3rem;      /*  48px */
	--text-6xl:  3.75rem;   /*  60px */

	/* ── Spacing Scale ────────────────────────────────── */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* ── Layout ───────────────────────────────────────── */
	--container-max:     1200px;
	--container-padding: 1.25rem; /* 20px — expands to 1.5rem on tablet+ */

	/* ── Radii ────────────────────────────────────────── */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 9999px;

	/* ── Shadows ──────────────────────────────────────── */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.09);
	--shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.13);
	--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

	/* ── Transitions ──────────────────────────────────── */
	--transition: 0.2s ease;
}

@media (min-width: 768px) {
	:root {
		--container-padding: 1.5rem;
	}
}