/**
 * F. Gaspari — Global Design Foundation v1
 *
 * Shared design tokens, safe global defaults and reusable layout/typography
 * helpers for Elementor and custom components.
 *
 * Keep page-specific and component-specific styling out of this file.
 */

:root {
	/* =========================================================
	   01. BRAND PRIMITIVES
	   ========================================================= */

	--fg-green-900: #123c32;
	--fg-linen-100: #f4f0e6;
	--fg-graphite-900: #1e1e1b;
	--fg-bronze-500: #a87c4f;
	--fg-sage-500: #7e9486;
	--fg-sand-300: #dcd2bc;
	--fg-ink-blue-700: #27405c;
	--fg-terracotta-500: #b5654a;
	--fg-signal-green-600: #2e7d5b;
	--fg-seal-red-700: #9c3d2e;

	/* Backward-compatible aliases from the initial foundation. */
	--fg-color-verde-alfaiate: var(--fg-green-900);
	--fg-color-linho: var(--fg-linen-100);
	--fg-color-grafite: var(--fg-graphite-900);
	--fg-color-bronze: var(--fg-bronze-500);
	--fg-color-salvia: var(--fg-sage-500);
	--fg-color-areia: var(--fg-sand-300);
	--fg-color-azul-tinta: var(--fg-ink-blue-700);
	--fg-color-terracota: var(--fg-terracotta-500);
	--fg-color-verde-sinal: var(--fg-signal-green-600);
	--fg-color-vermelho-lacre: var(--fg-seal-red-700);

	/* =========================================================
	   02. SEMANTIC COLORS
	   Use these aliases in components whenever possible.
	   ========================================================= */

	--fg-color-brand: var(--fg-green-900);
	--fg-color-accent: var(--fg-bronze-500);
	--fg-color-brand-hover: #0e3028;

	--fg-surface-page: var(--fg-linen-100);
	--fg-surface-editorial: var(--fg-linen-100);
	--fg-surface-brand: var(--fg-green-900);
	--fg-surface-dark: var(--fg-graphite-900);
	--fg-surface-muted: var(--fg-sand-300);
	--fg-surface-bright: #ffffff;
	--fg-surface-header-dark: rgba(18, 60, 50, 0.94);
	--fg-surface-header-dark-scrolled: rgba(18, 60, 50, 0.96);
	--fg-surface-header-light: rgba(244, 240, 230, 0.94);

	--fg-text-primary: var(--fg-graphite-900);
	--fg-text-secondary: rgba(30, 30, 27, 0.70);
	/* 0.64 keeps small muted text above AA contrast on Linen. */
	--fg-text-muted: rgba(30, 30, 27, 0.64);
	/* Functional accessible Bronze for small text on Linen; not a new brand color. */
	--fg-text-accent: #8a633f;
	--fg-text-on-dark: var(--fg-linen-100);
	--fg-text-on-dark-muted: rgba(244, 240, 230, 0.68);

	--fg-line-light: rgba(30, 30, 27, 0.14);
	--fg-line-medium: rgba(30, 30, 27, 0.26);
	--fg-line-on-dark: rgba(244, 240, 230, 0.18);
	--fg-line-accent: rgba(168, 124, 79, 0.66);

	/* =========================================================
	   03. TYPOGRAPHY
	   Official font files are self-hosted by fg-fonts.css.
	   ========================================================= */

	--fg-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--fg-font-body: "Instrument Sans", Arial, Helvetica, sans-serif;
	--fg-font-data: "Spline Sans Mono", "SFMono-Regular", Consolas, monospace;

	--fg-weight-light: 300;
	--fg-weight-regular: 400;
	--fg-weight-medium: 500;
	--fg-weight-semibold: 600;

	/* Fluid type scale for custom components. Elementor Global Fonts should
	   mirror this hierarchy, but do not need identical implementation. */
	--fg-type-display-xl: clamp(3.5rem, 6.5vw, 6.75rem);
	--fg-type-h1: clamp(3rem, 5vw, 5.25rem);
	--fg-type-h2: clamp(2.35rem, 3.8vw, 4rem);
	--fg-type-h3: clamp(1.65rem, 2.2vw, 2.25rem);
	--fg-type-body-lg: clamp(1.0625rem, 1.15vw, 1.25rem);
	--fg-type-body: 1rem;
	--fg-type-small: 0.875rem;
	--fg-type-label: 0.75rem;

	--fg-leading-display: 0.96;
	--fg-leading-heading: 1.06;
	--fg-leading-body: 1.65;
	--fg-leading-compact: 1.35;

	--fg-tracking-display: -0.035em;
	--fg-tracking-heading: -0.02em;
	--fg-tracking-body: -0.005em;
	--fg-tracking-label: 0.14em;
	--fg-tracking-data: 0.04em;

	/* =========================================================
	   04. LAYOUT / GRID
	   ========================================================= */

	--fg-container-wide: 1400px;
	--fg-container-content: 1080px;
	--fg-container-reading: 780px;
	--fg-header-height: 88px;
	--fg-page-offset: var(--fg-header-height);
	--fg-scroll-padding-top: calc(var(--fg-header-height) + var(--fg-space-3));

	--fg-page-gutter: 64px;
	--fg-grid-gap: 24px;
	--fg-section-space-standard: clamp(5.5rem, 8vw, 10rem);
	--fg-section-space-compact: clamp(3.5rem, 5vw, 6rem);
	--fg-section-space-large: clamp(var(--fg-space-10), 12vw, var(--fg-space-11));
	--fg-section-space: var(--fg-section-space-standard);
	--fg-footer-space-block: clamp(var(--fg-space-7), 8vw, var(--fg-space-10));

	/* =========================================================
	   05. SPACING SCALE
	   ========================================================= */

	--fg-space-1: 0.5rem;   /* 8 */
	--fg-space-2: 0.75rem;  /* 12 */
	--fg-space-3: 1rem;     /* 16 */
	--fg-space-4: 1.5rem;   /* 24 */
	--fg-space-5: 2rem;     /* 32 */
	--fg-space-6: 3rem;     /* 48 */
	--fg-space-7: 4rem;     /* 64 */
	--fg-space-8: 5rem;     /* 80 */
	--fg-space-9: 6rem;     /* 96 */
	--fg-space-10: 7.5rem;  /* 120 */
	--fg-space-11: 10rem;   /* 160 */

	/* =========================================================
	   06. BORDERS / RADII / SHADOWS
	   Luxury direction: lines before shadows, small radii.
	   ========================================================= */

	--fg-border-subtle: 1px solid var(--fg-line-light);
	--fg-border-medium: 1px solid var(--fg-line-medium);
	--fg-border-on-dark: 1px solid var(--fg-line-on-dark);
	--fg-border-accent: 1px solid var(--fg-line-accent);

	--fg-radius-none: 0;
	--fg-radius-xs: 2px;
	--fg-radius-sm: 4px;
	--fg-radius-md: 8px;

	--fg-shadow-header: 0 12px 40px rgba(18, 60, 50, 0.08);
	--fg-shadow-float: 0 24px 70px rgba(18, 60, 50, 0.10);

	/* =========================================================
	   07. MOTION TOKENS
	   Actual animation recipes live in fg-animations.css / JS.
	   ========================================================= */

	--fg-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
	--fg-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--fg-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	--fg-duration-instant: 160ms;
	--fg-duration-fast: 220ms;
	--fg-duration-medium: 480ms;
	--fg-duration-standard: 700ms;
	--fg-duration-slow: 1000ms;
	--fg-duration-cinematic: 1400ms;

	/* =========================================================
	   08. LAYERS
	   ========================================================= */

	--fg-z-base: 1;
	--fg-z-sticky: 50;
	--fg-z-header: 100;
	--fg-z-overlay: 200;
	--fg-z-modal: 1000;
}

/* ===========================================================
   SAFE GLOBAL DEFAULTS
   =========================================================== */

html {
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: var(--fg-scroll-padding-top);
}

body {
	background: var(--fg-surface-page);
	color: var(--fg-text-primary);
	font-family: var(--fg-font-body);
	font-size: var(--fg-type-body);
	line-height: var(--fg-leading-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--fg-color-brand);
	color: var(--fg-text-on-dark);
}

/* Invert selection on Verde surfaces while preserving the existing selection
   behavior of form controls and button components. */
.fg-surface--green::selection,
.fg-surface--green
	:where(
		:not(
			button,
			button *,
			input,
			textarea,
			select,
			option,
			.elementor-button,
			.elementor-button *,
			.fg-btn,
			.fg-btn *
		)
	)::selection {
	background: var(--fg-text-on-dark);
	color: var(--fg-color-brand);
}

:focus-visible {
	outline: 2px solid var(--fg-color-accent);
	outline-offset: 4px;
}

/* ===========================================================
   LAYOUT HELPERS
   Assign these classes in Elementor Advanced > CSS Classes or
   use them in custom components.
   =========================================================== */

.fg-container {
	width: min(
		calc(100% - (var(--fg-page-gutter) * 2)),
		var(--fg-container-wide)
	);
	margin-inline: auto;
}

.fg-container--content {
	max-width: var(--fg-container-content);
}

.fg-container--reading {
	max-width: var(--fg-container-reading);
}

.fg-surface--linen {
	background: var(--fg-surface-editorial);
	color: var(--fg-text-primary);
}

.fg-surface--green {
	background: var(--fg-surface-brand);
	color: var(--fg-text-on-dark);
}

.fg-surface--dark {
	background: var(--fg-surface-dark);
	color: var(--fg-text-on-dark);
}

/* ===========================================================
   TYPOGRAPHY HELPERS
   =========================================================== */

.fg-font-display {
	font-family: var(--fg-font-display);
}

.fg-font-body {
	font-family: var(--fg-font-body);
}

.fg-font-data {
	font-family: var(--fg-font-data);
}

.fg-display,
.fg-display-xl,
.fg-heading-1,
.fg-heading-2,
.fg-heading-3 {
	font-family: var(--fg-font-display);
	font-weight: var(--fg-weight-light);
	font-optical-sizing: auto;
	text-wrap: balance;
}

.fg-display-xl {
	font-size: var(--fg-type-display-xl);
	line-height: var(--fg-leading-display);
	letter-spacing: var(--fg-tracking-display);
}

.fg-heading-1 {
	font-size: var(--fg-type-h1);
	line-height: var(--fg-leading-display);
	letter-spacing: var(--fg-tracking-display);
}

.fg-heading-2 {
	font-size: var(--fg-type-h2);
	line-height: var(--fg-leading-heading);
	letter-spacing: var(--fg-tracking-heading);
}

.fg-heading-3 {
	font-size: var(--fg-type-h3);
	line-height: var(--fg-leading-heading);
	letter-spacing: var(--fg-tracking-heading);
}

.fg-body-lg {
	font-family: var(--fg-font-body);
	font-size: var(--fg-type-body-lg);
	line-height: var(--fg-leading-body);
	letter-spacing: var(--fg-tracking-body);
}

.fg-body {
	font-family: var(--fg-font-body);
	font-size: var(--fg-type-body);
	line-height: var(--fg-leading-body);
	letter-spacing: var(--fg-tracking-body);
}

.fg-small {
	font-family: var(--fg-font-body);
	font-size: var(--fg-type-small);
	line-height: 1.55;
}

.fg-eyebrow {
	font-family: var(--fg-font-body);
	font-size: var(--fg-type-label);
	font-weight: var(--fg-weight-semibold);
	line-height: var(--fg-leading-compact);
	letter-spacing: var(--fg-tracking-label);
	text-transform: uppercase;
}

.fg-data,
.fg-mono,
.fg-data-label {
	font-family: var(--fg-font-data);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--fg-tracking-data);
}

.fg-data-label {
	font-size: var(--fg-type-label);
	font-weight: var(--fg-weight-regular);
	line-height: var(--fg-leading-compact);
	text-transform: uppercase;
}

.fg-text-muted {
	color: var(--fg-text-muted);
}

.fg-text-on-dark-muted {
	color: var(--fg-text-on-dark-muted);
}

.fg-text-accent {
	color: var(--fg-text-accent);
}

/* ===========================================================
   GRAPHIC LANGUAGE HELPERS
   =========================================================== */

.fg-rule {
	width: 100%;
	height: 1px;
	border: 0;
	background: var(--fg-line-light);
}

.fg-surface--green .fg-rule,
.fg-surface--dark .fg-rule {
	background: var(--fg-line-on-dark);
}

.fg-thread-line {
	height: 1px;
	background: var(--fg-color-accent);
	transform-origin: left center;
}

/* ===========================================================
   ACCESSIBILITY HELPERS
   =========================================================== */

.fg-sr-only {
	/* !important protects this accessibility utility from Elementor widget styles. */
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ===========================================================
   RESPONSIVE FOUNDATION
   =========================================================== */

@media (max-width: 1366px) {
	:root {
		--fg-page-gutter: 44px;
	}
}

@media (max-width: 1024px) {
	:root {
		--fg-page-gutter: 32px;
		--fg-grid-gap: 20px;
		--fg-header-height: 76px;
	}
}

@media (max-width: 767px) {
	:root {
		--fg-page-gutter: 20px;
		--fg-grid-gap: 16px;
		--fg-header-height: 68px;
		--fg-section-space-standard: clamp(4rem, 16vw, 5.5rem);
		--fg-section-space-compact: clamp(3rem, 11vw, 4rem);
		--fg-section-space-large: clamp(var(--fg-space-8), 20vw, var(--fg-space-10));
		--fg-footer-space-block: clamp(var(--fg-space-6), 14vw, var(--fg-space-8));
	}
}

@media (prefers-reduced-motion: reduce) {
	/* !important overrides both theme and Elementor motion preferences. */
	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}