/* ==========================================================================
   Vesta Design Tokens — CSS Custom Properties

   GENERATED from /vesta-design-tokens.json (project root).
   Tokens version: 0.5.0-draft
   DO NOT EDIT DIRECTLY. Regenerate from tokens.

   Loads after elementor-frontend and before vesta-custom.css
   (see includes/enqueue.php). Desktop values in :root; mobile overrides
   in the @media block at the bottom (mobile breakpoint: 767px).

   Token references are resolved as var() chains so brand values stay
   single-source.
   ========================================================================== */

:root {
	/* ------ color.brand ------ */
	--vesta-color-navy: #1F3A5F;
	--vesta-color-coral: #E84A6F;
	--vesta-color-teal: #5BAFA8;
	--vesta-color-footer-burgundy: #7A1F3E;

	/* ------ color.interactive ------ */
	--vesta-color-coral-hover: #D13B5F;
	--vesta-color-teal-hover: #4C968F;

	/* ------ color.neutral ------ */
	--vesta-color-white: #FFFFFF;
	--vesta-color-off-white: #F5F7F8;
	--vesta-color-tinted-section: #E8F0EF;
	--vesta-color-text-dark: var(--vesta-color-navy); /* token value duplicates navy */
	--vesta-color-text-muted: #6B7B85;
	--vesta-color-border-subtle: #E0E5E8;

	/* ------ color.ui ------ */
	--vesta-color-footer-bg: var(--vesta-color-navy); /* token value duplicates navy */
	--vesta-color-footer-text: #FFFFFF; /* LOW confidence placeholder */

	/* ------ typography.font-family ------ */
	--vesta-font-heading: Montserrat, sans-serif;
	--vesta-font-body: "Open Sans", sans-serif;

	/* ------ typography.font-weight ------ */
	--vesta-weight-heading-bold: 800;
	--vesta-weight-heading-medium: 600;
	--vesta-weight-body-regular: 400;
	--vesta-weight-body-medium: 500;

	/* ------ typography.scale: hero (re-ratified Phase 4) ------ */
	--vesta-hero-size: 44px;
	--vesta-hero-weight: 800;
	--vesta-hero-tracking: 0.1em;
	--vesta-hero-line-height: 1.25;
	--vesta-hero-case: uppercase;
	--vesta-hero-color: var(--vesta-color-white);

	/* ------ typography.scale: h1 (section headers) ------ */
	--vesta-h1-size: 48px;
	--vesta-h1-weight: 800;
	--vesta-h1-tracking: 0.06em;
	--vesta-h1-case: uppercase;
	--vesta-h1-color: var(--vesta-color-navy);

	/* ------ typography.scale: h2 (subheaders) ------ */
	--vesta-h2-size: 24px;
	--vesta-h2-weight: 800;
	--vesta-h2-tracking: 0.04em;
	--vesta-h2-case: uppercase;
	--vesta-h2-color: var(--vesta-color-navy);

	/* ------ typography.scale: lead (statement text, added Phase 4) ------ */
	--vesta-lead-size: 26px;
	--vesta-lead-weight: 600;
	--vesta-lead-line-height: 1.5;
	--vesta-lead-case: none;
	--vesta-lead-color: var(--vesta-color-navy);

	/* ------ typography.scale: h3-card-title (service cards) ------ */
	--vesta-h3-card-size: 14px;
	--vesta-h3-card-weight: 800;
	--vesta-h3-card-tracking: 0.05em;
	--vesta-h3-card-case: uppercase;
	--vesta-h3-card-color: var(--vesta-color-teal);

	/* ------ typography.scale: h3-news-title ------ */
	--vesta-h3-news-size: 15px;
	--vesta-h3-news-weight: 800;
	--vesta-h3-news-tracking: 0.03em;
	--vesta-h3-news-case: uppercase;
	--vesta-h3-news-color: var(--vesta-color-navy);

	/* ------ typography.scale: body ------ */
	--vesta-body-size: 16px;
	--vesta-body-weight: 400;
	--vesta-body-line-height: 1.6;
	--vesta-body-color: var(--vesta-color-navy);

	/* ------ typography.scale: small (dates, READ MORE, eyebrows) ------ */
	--vesta-small-size: 12px;
	--vesta-small-weight: 600;
	--vesta-small-tracking: 0.05em;
	--vesta-small-case: uppercase;
	--vesta-small-color: var(--vesta-color-text-muted);

	/* ------ typography.scale: nav + states (re-ratified Phase 4) ------ */
	--vesta-nav-size: 16px;
	--vesta-nav-weight: 600;
	--vesta-nav-color: var(--vesta-color-navy);
	--vesta-nav-hover: var(--vesta-color-coral);
	--vesta-nav-active: var(--vesta-color-coral);

	/* ------ nav.dropdown (Phase 4) ------ */
	--vesta-dropdown-item-color: var(--vesta-color-navy);
	--vesta-dropdown-item-bg: var(--vesta-color-white);
	--vesta-dropdown-hover-color: var(--vesta-color-coral);
	--vesta-dropdown-hover-bg: var(--vesta-color-off-white);

	/* ------ link ------ */
	--vesta-link-color: var(--vesta-color-coral);
	--vesta-link-hover: var(--vesta-color-coral-hover);

	/* ------ spacing.scale ------ */
	--vesta-space-xs: 8px;
	--vesta-space-sm: 16px;
	--vesta-space-md: 24px;
	--vesta-space-lg: 48px;
	--vesta-space-xl: 80px;
	--vesta-space-xxl: 120px;

	/* ------ spacing.section-padding / card-padding ------ */
	--vesta-section-pad-y: 104px;
	--vesta-card-padding: 24px;

	/* ------ layout.container ------ */
	--vesta-container-max: 1200px;
	--vesta-container-pad-x: 24px;

	/* ------ layout.breakpoints (informational; CSS vars can't drive @media) ------ */
	--vesta-breakpoint-mobile: 767px;
	--vesta-breakpoint-tablet: 1024px;
	--vesta-breakpoint-desktop: 1240px;

	/* ------ radius ------ */
	--vesta-radius-sm: 4px;
	--vesta-radius-md: 8px;
	--vesta-radius-card: 8px;
	--vesta-radius-button: 4px;

	/* ------ shadow ------ */
	--vesta-shadow-card: 0 2px 12px rgba(31, 58, 95, 0.08);
	--vesta-shadow-card-hover: 0 4px 20px rgba(31, 58, 95, 0.12);


	/* ------ button.primary-coral ------ */
	--vesta-btn-primary-bg: var(--vesta-color-coral);
	--vesta-btn-primary-bg-hover: var(--vesta-color-coral-hover);
	--vesta-btn-primary-text: #FFFFFF;
	--vesta-btn-primary-padding: 14px 32px;
	--vesta-btn-primary-radius: var(--vesta-radius-button);
	--vesta-btn-primary-weight: 600;
	--vesta-btn-primary-case: uppercase;
	--vesta-btn-primary-tracking: 0.05em;
	--vesta-btn-primary-size: 14px;

	/* ------ button.secondary-teal ------ */
	--vesta-btn-secondary-bg: var(--vesta-color-teal);
	--vesta-btn-secondary-bg-hover: var(--vesta-color-teal-hover);
	--vesta-btn-secondary-text: #FFFFFF;
	--vesta-btn-secondary-padding: 14px 32px;
	--vesta-btn-secondary-radius: var(--vesta-radius-button);
	--vesta-btn-secondary-weight: 600;
	--vesta-btn-secondary-case: uppercase;
	--vesta-btn-secondary-tracking: 0.05em;
	--vesta-btn-secondary-size: 14px;

	/* ------ button: shared font family ------ */
	--vesta-btn-font: var(--vesta-font-heading);

	/* ------ form.input ------ */
	--vesta-form-input-bg: var(--vesta-color-white);
	--vesta-form-input-border-width: 1px;
	--vesta-form-input-border-color: var(--vesta-color-border-subtle);
	--vesta-form-input-padding: 12px 16px;
	--vesta-form-input-radius: var(--vesta-radius-sm);
	--vesta-form-input-focus-border: var(--vesta-color-teal);

	/* ------ header (floating pill, ratified Phase 4) ------ */
	--vesta-header-offset: var(--vesta-space-lg);
	--vesta-header-max: calc(var(--vesta-container-max) + 120px);
	--vesta-header-bg: rgba(255, 255, 255, 0.82); /* informational — applied in the header template */
	--vesta-header-shadow-scroll: var(--vesta-shadow-card);

	/* ------ icon.service-card ------ */
	--vesta-icon-service-size: 48px;
	--vesta-icon-service-color: var(--vesta-color-coral);
}

/* ==========================================================================
   Mobile overrides (tokens: size-mobile / mobile values)
   ========================================================================== */
@media (max-width: 767px) {
	:root {
		--vesta-hero-size: 26px;
		--vesta-h1-size: 32px;
		--vesta-h2-size: 20px;
		--vesta-lead-size: 20px;
		--vesta-h3-card-size: 13px;
		--vesta-h3-news-size: 14px;
		--vesta-section-pad-y: 60px;
		--vesta-card-padding: 20px;
		--vesta-container-pad-x: 16px;
	}
}