/* =========================================================================
   variables.css — FUENTE ÚNICA DE VERDAD
   Colores y tipografías del sistema de diseño de Abogalis.
   Tokens extraídos del diseño de referencia (OpenAI Sites / Starter Project).
   NUNCA hardcodear colores o fuentes en otros archivos: usar var(--...).
   ========================================================================= */

:root {
	/* --- Paleta corporativa (exacta del Starter Project) --- */
	--blue: #087ca7;   /* Azul primario (botones, enlaces, acentos)          */
	--cyan: #13a7d6;   /* Cian (gradientes, detalles)                        */
	--dark: #08263a;   /* Fondo oscuro de secciones (partner-section)        */
	--navy: #123247;   /* Azul marino profundo (sombras, texto fuerte)       */
	--ink: #16364b;    /* Color de texto principal                           */
	--muted: #5c7180;  /* Texto secundario / apoyos                          */
	--line: #d5e5ec;   /* Bordes y separadores                               */
	--sky: #eaf6fb;    /* Superficie clara azulada (hero, badges)            */
	--soft: #f6fafc;   /* Superficie de sección alterna (gris azulado suave) */
	--white: #ffffff;

	/* --- Tonos de apoyo derivados --- */
	--blue-700: #075c81;         /* Azul más oscuro (gradiente CTA)            */
	--blue-600: #0697c5;         /* Azul del extremo del gradiente de botón    */
	--ink-90: rgba(22, 54, 75, 0.9);
	--ink-70: rgba(22, 54, 75, 0.7);
	--on-dark: rgba(255, 255, 255, 0.86); /* Texto sobre fondos oscuros        */
	--on-dark-muted: rgba(255, 255, 255, 0.66);

	/* --- Gradientes reutilizables --- */
	--grad-hero: linear-gradient(115deg, #f4fbfe 0%, #eaf6fb 55%, #e2f1f8 100%);
	--grad-button: linear-gradient(135deg, var(--blue), var(--blue-600));
	--grad-cta: linear-gradient(120deg, var(--blue), var(--blue-700));
	--grad-dark: linear-gradient(160deg, #0b2f47 0%, var(--dark) 100%);

	/* --- Sombras --- */
	--shadow-sm: 0 9px 22px rgba(8, 124, 167, 0.16);
	--shadow-card: 0 16px 40px rgba(18, 50, 71, 0.07);
	--shadow-lg: 0 20px 55px rgba(18, 50, 71, 0.10);

	/* --- Tipografías --- */
	--font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-heading: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Pesos (según referencia: títulos 750, botones 750, enlaces fuertes 800) */
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-heading: 750;
	--fw-strong: 800;

	/* --- Radios --- */
	--radius-card: 22px;
	--radius-btn: 11px;
	--radius-pill: 999px;
	--radius-sm: 12px;

	/* --- Espaciados de sección --- */
	--section-pad-y: clamp(56px, 8vw, 110px);
	--container-max: 1160px;
	--container-pad: clamp(20px, 5vw, 40px);
	--gap: clamp(20px, 3vw, 34px);
}