/* =========================================================================
   ViraAgro — Design Tokens
   Direction: "field and laboratory" — deep agricultural green with wheat
   gold as the accent, over green-grey neutrals. Every colour is defined
   here; Elementor templates should reference these variables only.
   ========================================================================= */

:root {

	/* ---------- Brand ---------- */
	--vira-green-900: #0E3529;   /* dark header, footer */
	--vira-green-800: #12452F;
	--vira-green-700: #17624A;   /* brand primary */
	--vira-green-600: #1E7D5B;
	--vira-green-500: #2A9D6E;   /* buttons, active links */
	--vira-green-300: #8FC9AE;
	--vira-green-100: #DDEDE4;   /* soft section background */
	--vira-green-50:  #F0F6F2;

	/* ---------- Accent: wheat gold ---------- */
	--vira-wheat-600: #A9821B;
	--vira-wheat-500: #C9A227;   /* heading rule, badges, icons */
	--vira-wheat-200: #F0E3B6;

	/* ---------- Soil (for image sections) ---------- */
	--vira-soil-700: #4A3728;
	--vira-soil-300: #C7B29B;

	/* ---------- Neutrals ---------- */
	--vira-ink:      #0F1A15;   /* body text */
	--vira-ink-70:   #47554E;   /* secondary text */
	--vira-ink-45:   #7C8A83;   /* captions */
	--vira-line:     #E2E7E3;   /* rules and borders */
	--vira-surface:  #FFFFFF;   /* cards */
	--vira-bg:       #F7F9F7;   /* page background */

	/* ---------- Status ---------- */
	--vira-success: #2A9D6E;
	--vira-warning: #C9821F;
	--vira-danger:  #B3452F;

	/* ---------- Typography ---------- */
	--vira-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--vira-font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--vira-font-num:     var(--vira-font-body);
	/* Inter is loaded once by Elementor's global font settings. */

	/* Fluid type scale */
	--vira-fs-display: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
	--vira-fs-h1:      clamp(1.8rem, 1.3rem + 2.2vw, 2.75rem);
	--vira-fs-h2:      clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem);
	--vira-fs-h3:      clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
	--vira-fs-body:    1rem;
	--vira-fs-sm:      0.9rem;
	--vira-fs-xs:      0.8rem;

	--vira-lh-tight: 1.18;
	--vira-lh-body:  1.7;

	/* ---------- Spacing (4pt scale) ---------- */
	--vira-sp-1: 4px;
	--vira-sp-2: 8px;
	--vira-sp-3: 12px;
	--vira-sp-4: 16px;
	--vira-sp-5: 24px;
	--vira-sp-6: 32px;
	--vira-sp-7: 48px;
	--vira-sp-8: 64px;
	--vira-sp-9: 96px;

	/* Vertical section rhythm */
	--vira-section-y: clamp(56px, 6vw, 104px);

	/* ---------- Radius and shadow ---------- */
	--vira-radius-sm: 8px;
	--vira-radius:    14px;
	--vira-radius-lg: 22px;
	--vira-radius-pill: 999px;

	--vira-shadow-sm: 0 1px 2px rgba(15, 26, 21, .06), 0 2px 6px rgba(15, 26, 21, .04);
	--vira-shadow:    0 4px 12px rgba(15, 26, 21, .07), 0 12px 28px rgba(15, 26, 21, .06);
	--vira-shadow-lg: 0 12px 24px rgba(15, 26, 21, .09), 0 28px 60px rgba(15, 26, 21, .10);

	/* ---------- Motion ---------- */
	--vira-ease: cubic-bezier(.2, .7, .3, 1);
	--vira-dur:  .28s;

	/* ---------- Layers ---------- */
	--vira-z-header: 100;
	--vira-z-overlay: 500;

	/* ---------- Content width ---------- */
	--vira-sticky-top: 130px;

	--vira-container: 1240px;
	--vira-container-narrow: 820px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	:root { --vira-dur: 0.01ms; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}