/*
 * Design tokens — Sánchez Márquez Abogados.
 * 1:1 con el Design System de Claude Design (proyecto "Sánchez Márquez Design
 * System") y con los Global Colors / Global Fonts registrados en el Kit de
 * Elementor. No introducir valores nuevos aquí sin registrarlos también allí.
 */

:root {

	/* Color — paleta web: azul identidad, marfil lienzo, piedra apoyo, madera acento */
	--color-primary: #10243A;
	--color-primary-hover: #654936;
	--color-secondary: #C9C5BD;
	--color-accent: #B18A58;

	--color-text-primary: #10243A;
	--color-text-secondary: #34383A;
	--color-text-muted: #6F6D68;

	--color-background: #F4F1EB;
	--color-background-alt: #E5E0D8;
	--color-surface: #FAF9F6;
	--color-border: #D5D1C9;

	--color-success: #1F6B4A;
	--color-warning: #8A5A11;
	--color-error: #8E2020;

	/* Azul profundo — CTA final, footer, fondos de máximo contraste (no es Global Color) */
	--color-primary-deep: #0A1826;

	/* Radius — editorial, no app-like: la fotografía y los bloques de hero van a escuadra */
	--radius-xs: 3px;
	--radius-sm: 8px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-xl: 22px;
	--radius-pill: 999px;

	/* Spacing — escala de 4px */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 40px;
	--space-8: 56px;
	--space-9: 72px;
	--space-10: 96px;
	--space-11: 128px;
	--space-12: 160px;

	/* Ritmo de sección y layout — escalonados en los breakpoints de Elementor */
	--section-y: 160px;
	--section-y-tight: 96px;
	--container-max: 1200px;
	--container-narrow: 760px;
	--gutter: 64px;
	--grid-gap: 24px;

	/* Typography */
	--font-display: Georgia, Gelasio, "Times New Roman", "Liberation Serif", serif;
	--font-body: Manrope, Inter, "Helvetica Neue", Arial, system-ui, sans-serif;

	--type-display: 88px;
	--type-h1: 56px;
	--type-h2: 36px;
	--type-h3: 24px;
	--type-h4: 20px;
	--type-body-lg: 20px;
	--type-body: 17px;
	--type-body-sm: 15px;
	--type-label: 14px;
	--type-caption: 13px;
	--type-eyebrow: 11px;
}

/* Breakpoints: el Kit de Elementor de este sitio usa tablet <=1099px /
   movil <=759px (no los valores por defecto de Elementor). Mantener estos
   umbrales sincronizados con Elementor > Ajustes del sitio > Breakpoints. */
@media (max-width: 1099px) {
	:root {
		--section-y: 112px;
		--section-y-tight: 72px;
		--gutter: 40px;

		--type-display: 64px;
		--type-h1: 44px;
		--type-h2: 32px;
		--type-h3: 22px;
		--type-h4: 19px;
		--type-body-lg: 19px;
	}
}

@media (max-width: 759px) {
	:root {
		--section-y: 80px;
		--section-y-tight: 56px;
		--gutter: 20px;
		--grid-gap: 16px;

		--type-display: 44px;
		--type-h1: 34px;
		--type-h2: 26px;
		--type-h3: 20px;
		--type-h4: 18px;
		--type-body-lg: 18px;
		--type-body: 16px;
	}
}