/* ==========================================================================
   Wellfield design tokens — single source of truth for CSS custom properties.
   Mirrors theme.json presets (see theme.json settings). Change values in both.
   ========================================================================== */

:root {
	/* Brand colors */
	--wf-primary: #ff5f4b;          /* coral accent: links, labels, CTAs (Figma) */
	--wf-primary-hover: #e5503c;    /* darkened coral on hover */
	--wf-secondary: #5a5a5a;        /* grey: body text, dark sections */
	--wf-grey-label: #828486;       /* neutral eyebrow/label grey (Figma) */
	--wf-white: #ffffff;
	--wf-light-bg: #f5f5f5;

	/* Section grounds */
	--wf-hero-bg: #ffffff;          /* hero/header ground — white per Figma */
	--wf-footer-grey: #F2F2F2;      /* footer + form strip */
	--wf-brands-bg: #43505a;        /* brands (dark) section */
	--wf-dark-panel: #464d54;       /* dark text-section ground (Figma) */
	--wf-border-slate: #2a2f35;     /* brand-strip card borders */
	--wf-sage: #b4c2c0;             /* sage grey-green gradient start */

	/* Tints */
	--wf-tint-coinmama: #ffffff;
	--wf-tint-defi: #fff5f5;
	--wf-tint-tradewind: #eff1f4;

	/* Gradients */
	--wf-gradient: linear-gradient(85.41deg, #b4c2c0 15.51%, #ff5f4b 83.46%);
	--wf-gradient-head: linear-gradient(90deg, #b4c2c0 0%, #e8706a 45%, #ff5f4b 100%);
	--wf-btn-border: linear-gradient(90deg, #b4c2c0 30%, #ff5f4b 100%);

	/* Spacing scale */
	--wf-xs: 0.5rem;
	--wf-sm: 1rem;
	--wf-md: 1.5rem;
	--wf-lg: 0rem;
	--wf-xl: 3rem;
	--wf-2xl: 4rem;
	--wf-section: 5rem;

	/* Layout — Figma frame is 1440 wide but content sits in a ~1160 centred
	   column (~133px gutters); the existing 1200 container matches that closely
	   and all sections (incl. the hero) share it. */
	--wf-container: 1200px;
	--wf-container-wide: 1280px;
	--wf-container-narrow: 800px;
	--wf-gutter: 2rem;

	/* Shape */
	--wf-radius-pill: 50px;
	--wf-radius-card: 16px;
	--wf-radius-dropdown: 14px;
	--wf-radius-input: 6px;

	/* Motion */
	--wf-transition: 0.25s ease;

	/* Type */
	--wf-font: 'Roboto', system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--wf-font-nav: 'Tenon', var(--wf-font);   /* nav uses Tenon in Figma; self-host required (see assets/fonts/tenon/) */
	--wf-font-faq: 'Lato', var(--wf-font);    /* Q&A accordion uses Lato (Google Fonts) */

	/* Shadows */
	--wf-shadow-header: 0 1px 0 rgba(0, 0, 0, .07);
	--wf-shadow-dropdown: 0 8px 40px rgba(0, 0, 0, .13);
	--wf-shadow-card: 0 2px 12px rgba(0, 0, 0, .12);
	--wf-shadow-image: 0 8px 40px rgba(0, 0, 0, .12);
}

@media (max-width: 575px) {
	:root {
		--wf-section: 3rem;
	}
}

/* Respect reduced-motion preferences (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}