/* ==========================================================================
   Kushology — Design tokens (from Figma "Home" 20210:669)
   ========================================================================== */
:root {
	/* Brand greens */
	--c-green-light: #d8f4a0;          /* primary brand green: cards, panels, hero */
	--c-green-light-50: rgba(216, 244, 160, 0.5);
	--c-green-mid: #b7e166;            /* header search button */
	--c-green-mid-50: rgba(150, 207, 39, 0.5);
	--c-green-deep-50: rgba(151, 207, 38, 0.5); /* product card gradient end */

	/* Neutrals */
	--c-white: #ffffff;
	--c-black: #000000;
	--c-near-black: #070805;
	--c-grey-light: #f0f0f0;           /* light form input bg */

	/* Text */
	--c-text: #000000;
	--c-text-muted: rgba(0, 0, 0, 0.7);
	--c-text-placeholder: rgba(0, 0, 0, 0.6);  /* 0.4 was 2.8:1 on --c-grey-light; 0.6 ≈ 4.6:1 */
	--c-text-on-dark: #ffffff;
	--c-text-on-dark-muted: rgba(255, 255, 255, 0.7);
	--c-text-on-dark-placeholder: rgba(255, 255, 255, 0.4);

	/* Feedback — matches the checkout error message already in main.css */
	--c-error: #b3261e;
	--c-error-ring: rgba(179, 38, 30, 0.25);

	/* Lines & overlays */
	--c-border: rgba(0, 0, 0, 0.1);
	--c-border-strong: rgba(0, 0, 0, 0.2);
	--c-divider: rgba(0, 0, 0, 0.1);
	--c-chip-overlay: rgba(0, 0, 0, 0.3);
	--c-glass: rgba(255, 255, 255, 0.1);
	/* Mid stop added: card titles sit ~60-80% down, where the old 40%→100% ramp was
	   still only ~0.3 alpha — two-line titles over bright photos (the deals cards)
	   lost contrast on their first line. Top 30% stays clear so the image reads. */
	--overlay-img: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.45) 62%, rgba(0,0,0,0.85) 100%);

	/* Typography */
	--font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--fw-regular: 400;
	--fw-medium: 500;

	--fs-h1: 56px;
	--fs-h2: 48px;
	--fs-h2-2line: 40px;
	--fs-statement: 36px;
	--fs-card-title: 28px;
	--fs-22: 22px;
	--fs-20: 20px;
	--fs-body: 16px;
	--fs-14: 14px;
	--fs-12: 12px;
	--fs-10: 10px;
	--lh-tight: 1.3;
	--lh-body: 1.5;

	/* Radii */
	--r-pill: 40px;

	/* One button height for the whole site. Gravity Forms submits are separate
	   elements from .btn, so without a shared token they drift — they were 56px on
	   contact, 38px in the homepage panel and 54px for real buttons. */
	--btn-h: 54px;
	--r-panel: 24px;
	--r-card: 16px;
	--r-card-sm: 8px;

	/* Spacing / layout */
	--container: 1440px;
	--container-pad: 48px;
	--section-py: 120px;
	--section-py-sm: 80px;
	--gap-section: 80px;
	--gap-lg: 40px;
	--gap-md: 24px;
	--gap-sm: 16px;
	--gap-xs: 8px;
}

@media (max-width: 900px) {
	:root {
		--fs-h1: 36px;
		--fs-h2: 32px;
		--fs-h2-2line: 28px;
		--fs-statement: 26px;
		--fs-card-title: 24px;
		--container-pad: 20px;
		--section-py: 64px;
		--section-py-sm: 48px;
		--gap-section: 48px;
	}
}