/*
 * AgriFeeds design tokens not expressible as Elementor v4 Global Variables —
 * spacing, radius, elevation, motion, and the interaction-state rules
 * (hover/press/focus/disabled/skeleton pulse). See BUILD-PLAN.md §6.1.
 * Colors and fonts live in Elementor Global Variables instead of here.
 */

/* No box-sizing reset existed anywhere for form controls. Every
   .agf-form-field (display:flex; flex-direction:column) stretches its
   input/select/textarea child to the container's full width, but with the
   browser's content-box default, each field's own padding+border then get
   added ON TOP of that stretched width -- overflowing its grid/flex cell by
   ~26px per field (10px 12px padding + 1px border on each side). Visible
   sitewide wherever .agf-form-field is used with more than one column, most
   noticeably in the signup wizard's two-column step. Scoped to form controls
   rather than a blanket `*` reset -- lower blast radius, and this is where
   the bug (and every other instance of it) actually lives. Found 2026-09-04. */
input, select, textarea, button {
	box-sizing: border-box;
}

:root {
	/* Brand colors + fonts — mirror the values in Elementor's v4 Global
	   Variables (see BUILD-PLAN.md §6.1). Elementor's own variable CSS custom
	   properties use opaque auto-generated IDs not meant for hand-written CSS
	   to bind to, so hand-written widgets (§6.3) reference these instead. */
	--accent: #3F5F24;
	--accent2: #D5A21A;
	--ink: #101516;
	--bg: #FFFFFF;
	--success: #2F7A3D;
	--warning: #D5A21A;
	--danger: #B3261E;
	--info: #3A5A63;
	--accent-hover: #375421;
	--accent-press: #2C441A;
	--accent-soft: #F2F5EE;
	--font-primary: "Archivo", system-ui, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, monospace;

	/* Spacing */
	--space-0: 0px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 32px;
	--space-8: 40px;
	--space-9: 48px;
	--space-10: 64px;
	--space-11: 80px;
	--space-12: 96px;
	--gutter-mobile: 16px;
	--gutter-tablet: 24px;
	--gutter-desktop: 32px;
	--container-max: 1280px;
	--container-narrow: 880px;
	--card-pad: 20px;
	--card-pad-lg: 24px;
	--card-pad-sm: 14px;
	--section-y: 64px;
	--section-y-mobile: 40px;
	--control-h-sm: 34px;
	--control-h: 44px;
	--control-h-lg: 52px;
	--tap-min: 44px;

	/* Radius */
	--radius-xs: 4px;
	--radius-sm: 8px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-xl: 20px;
	--radius-pill: 999px;
	--radius-card: 14px;
	--radius-control: 10px;
	--radius-input: 10px;
	--radius-chip: 999px;
	--radius-image: 12px;
	--radius-sheet: 20px;
	--border-w: 1px;
	--border-w-strong: 2px;

	/* Elevation — a hairline system; shadows are reserved for things that
	   genuinely float above the page (menus, sheets, dialogs, sticky bars). */
	--shadow-none: none;
	--shadow-raise: 0 1px 2px rgba(16, 21, 22, .06);
	--shadow-menu: 0 8px 24px -8px rgba(16, 21, 22, .18), 0 2px 6px rgba(16, 21, 22, .06);
	--shadow-sheet: 0 -8px 32px -12px rgba(16, 21, 22, .22);
	--shadow-dialog: 0 24px 64px -16px rgba(16, 21, 22, .35);
	--shadow-sticky: 0 -1px 0 var(--border-hairline), 0 -6px 18px -12px rgba(16, 21, 22, .18);
	--ring-focus: 0 0 0 3px rgba(63, 95, 36, .28);
	--ring-accent: 0 0 0 3px rgba(213, 162, 26, .32);
	--ring-danger: 0 0 0 3px rgba(179, 38, 30, .25);

	/* Motion */
	--dur-instant: 80ms;
	--dur-fast: 140ms;
	--dur-base: 200ms;
	--dur-slow: 320ms;
	--dur-sheet: 380ms;
	--ease-standard: cubic-bezier(.2, .6, .2, 1);
	--ease-out: cubic-bezier(.16, .84, .44, 1);
	--ease-in: cubic-bezier(.5, 0, .9, .4);
	--press-scale: .985;

	/* Border colors — Elementor Global Variables cover accent/ink/bg but not
	   this hairline-specific ramp. */
	--border-hairline: #DFE2DE;
	--border-strong: #C2C7C6;
	--border-brand: #3F5F24;
	--border-accent: #D5A21A;
	--surface-inset: #F3F4F1;
	--text-muted: #6B7476;
	--text-subtle: #949B9C;
}

/* Mobile browsers flash a default tap-highlight color on unstyled buttons/
   links on press -- on Android this is the DEVICE's own OS accent color
   (can render as bright pink/magenta depending on the phone's own theme),
   not anything set anywhere in this stylesheet. Found 2026-09-04 on the
   farm-card carousel's "next" arrow. Killed sitewide rather than per-
   component, since any unstyled interactive element is equally exposed;
   real tap/focus feedback uses the brand green instead. */
a, button, input, select, textarea, [role="button"] {
	-webkit-tap-highlight-color: transparent;
}
.agf-carousel__arrow:active,
.agf-carousel__arrow:focus-visible {
	color: var(--accent);
	background: var(--accent-soft);
	border-radius: var(--radius-sm);
}

/* Hairline card system — cards are white on white, separated by a border and
   radius, never a shadow. Emphasis comes from border/keyline/fill, not elevation. */
.agf-card {
	background: #FFFFFF;
	border: var(--border-w) solid var(--border-hairline);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-none);
	transition: border-color var(--dur-fast) var(--ease-standard);
}
.agf-card:hover {
	border-color: var(--border-strong);
}
.agf-card--selected {
	border: var(--border-w-strong) solid var(--border-brand);
	background: #F2F5EE;
}
.agf-card--promoted {
	border-top: 3px solid var(--border-accent);
}
.agf-card--disabled {
	background: var(--surface-inset);
	color: var(--text-subtle);
	border-color: var(--border-hairline);
}

/* Buttons — hover darkens one step (handled per-component via Global Variable
   shades), press scales down, focus never removed. */
.agf-btn {
	border-radius: var(--radius-control);
	box-shadow: none;
	transition: background-color var(--dur-fast) var(--ease-standard),
		transform var(--dur-instant) var(--ease-standard);
}
.agf-btn:active {
	transform: scale(var(--press-scale));
}
.agf-btn:focus-visible {
	outline: 2px solid var(--border-brand);
	outline-offset: 2px;
}

/* The `hidden` attribute's UA-stylesheet `display:none` loses to ANY author
   rule that sets `display` on the same element, regardless of specificity --
   author origin always beats UA origin in the cascade. Since components across
   this theme (.agf-btn variants, .agf-signup__grid, etc.) set an explicit
   `display`, JS-toggled `hidden` was silently ignored on them. Found 2026-09-02
   from a real report: a wizard step's hidden "Create account" button and
   hidden field grid were both staying visible the whole time. */
[hidden] {
	display: none !important;
}

/* No base <a> color was ever set anywhere in this theme -- every unstyled
   link (WooCommerce's default My Account markup, most visibly) fell back to
   the browser's own default blue/purple-visited link colors, which is what
   read as a stray "pink" on pages this theme hadn't explicitly restyled.
   Found 2026-09-02. Classed links (.agf-btn, .agf-topnav__link, etc.) all
   already set their own color and win on specificity, so this only affects
   genuinely unstyled links. */
a {
	color: var(--accent);
}
a:visited {
	color: var(--accent);
}
a:hover {
	color: var(--accent-hover);
}

/* Standing rule: any button styled with the solid brand-green background
   gets white text, everywhere on the site -- a guaranteed invariant, not
   just something each component remembers to pair by hand. Deliberately
   does NOT touch the soft/pale-green badges (.agf-chip--success,
   .agf-status-pill--success, --accent-soft) -- those already use dark-green
   text on a light background on purpose and would go illegible in white. */
.agf-btn--primary,
.agf-sidenav__item--active,
.woocommerce-cart .checkout-button,
.woocommerce-checkout #place_order,
.agf-account__content .woocommerce-Button,
.agf-account__content button.button {
	color: #FFFFFF !important;
}

/* Inputs */.agf-input:focus {
	box-shadow: var(--ring-focus);
	outline: none;
}

/* Disabled state — never expressed with opacity. */
.agf-disabled,
[disabled].agf-btn {
	background: var(--surface-inset);
	color: var(--text-subtle);
	cursor: not-allowed;
}

/* Skeleton loading — a static block with a slow opacity pulse, never a
   sweeping shimmer. */
@keyframes agf-skeleton-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: .6;
	}
}
.agf-skeleton {
	background: var(--surface-inset);
	border-radius: var(--radius-sm);
	animation: agf-skeleton-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.agf-card,
	.agf-btn,
	.agf-skeleton {
		transition: none !important;
		animation: none !important;
	}
}