/* ============================================================
   TOKENS.CSS — Sistema de diseño G&B Servicios Integrales
   Dirección: "Precisión técnica premium". Petróleo profundo +
   teal vívido + naranja cálido de acento. Tipografía display
   grande y segura, cuerpo muy legible, radios generosos.
   ============================================================ */

:root {
	/* --- Color --- */
	--gb-tinta: #0B2027;
	--gb-tinta-suave: #4B6E74;
	--gb-primario: #0E8F8F;
	--gb-primario-oscuro: #0B6E70;
	--gb-primario-tenue: #E4F5F3;
	--gb-acento: #FF7A45;
	--gb-acento-oscuro: #E0602C;
	--gb-ambar: #F2B33D;
	--gb-ambar-oscuro: #D4941E;
	--gb-fondo: #F7FAF9;
	--gb-fondo-alterno: #EEF6F4;
	--gb-superficie: #FFFFFF;
	--gb-borde: #DCE8E5;
	--gb-borde-fuerte: #B9D2CC;

	--gb-degradado-marca: linear-gradient(135deg, #0B2027 0%, #0E4B52 48%, #0E8F8F 100%);
	--gb-degradado-acento: linear-gradient(120deg, #0E8F8F 0%, #12AFA6 100%);

	/* --- Tipografía --- */
	--gb-font-display: 'Sora', 'Space Grotesk', 'Arial Narrow', sans-serif;
	--gb-font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
	--gb-font-mono: 'JetBrains Mono', 'Courier New', monospace;

	/* --- Radios --- */
	--gb-radio-sm: 6px;
	--gb-radio-md: 14px;
	--gb-radio-lg: 24px;
	--gb-radio-xl: 32px;

	/* --- Sombra --- */
	--gb-sombra-sm: 0 1px 2px rgba(11, 32, 39, 0.06);
	--gb-sombra-md: 0 8px 24px rgba(11, 32, 39, 0.10);
	--gb-sombra-lg: 0 20px 48px rgba(11, 32, 39, 0.16);
	--gb-sombra-glow: 0 0 0 1px rgba(14, 143, 143, 0.14), 0 20px 48px rgba(14, 143, 143, 0.18);

	/* --- Transición --- */
	--gb-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--gb-transicion: 0.3s var(--gb-ease);

	/* --- Layout --- */
	--gb-ancho-maximo: 1280px;
	--gb-espacio-seccion: 128px;
}

@media (max-width: 900px) {
	:root { --gb-espacio-seccion: 76px; }
}

@media (max-width: 560px) {
	:root { --gb-espacio-seccion: 56px; }
}