/* ============================================================
   FollowUp — Tokens de diseño
   ============================================================

   ⚠️  Los valores de marca de aquí abajo DUPLICAN el bloque :root
   de public/assets/styles.admin.css. Se mantienen idénticos a
   propósito: el login y el shell del admin son dos hojas
   autónomas (nunca se cargan juntas) pero son la misma marca.

   Si cambias un color aquí, cámbialo también allá. Mejor aún:
   cuando alguien retome el admin, que enlace este archivo y borre
   su :root — así deja de haber dos fuentes de verdad.
   ============================================================ */

:root {
	/* --- Marca: idénticos a styles.admin.css ------------------ */
	--fu-navy: #101b37;
	--fu-navy-700: #1d2b4f;
	--fu-orange: #f5a524;
	--fu-orange-700: #e08700;
	--fu-green: #00be84;
	--fu-green-700: #009c6c;
	--fu-green-050: #e7f7f1;
	--fu-text: #4a5568;
	--fu-muted: #98a2b3;
	--fu-border: #e8ecf2;
	--fu-hover: #f4f7fa;
	--fu-font: "Inter", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
		"Segoe UI", sans-serif;

	/* --- Solo login: el panel oscuro no existe en el admin ----
	   Tonos derivados de --fu-navy para que lean como la misma
	   familia, no como otro azul. */
	--fu-navy-900: #0a1229;
	--fu-navy-950: #060a18;

	/* Telón oscuro. Lo comparten el panel del login y las pantallas
	   de error: una sola definición para que no puedan divergir. */
	--fu-bg-navy:
		radial-gradient(1100px 560px at 12% -10%, rgba(29, 43, 79, 0.9), transparent 60%),
		radial-gradient(820px 460px at 92% 108%, rgba(16, 27, 55, 0.95), transparent 55%),
		linear-gradient(160deg, var(--fu-navy-900) 0%, var(--fu-navy-950) 100%);

	/* Sobre navy oscuro, --fu-green (#00be84) queda algo apagado;
	   este tono aclarado es el que se usa contra el panel. */
	--fu-green-400: #2ed9a3;

	/* Titulares del login y de las páginas de error. El shell del admin es
	   solo Inter, y esta hoja no se carga allí.

	   Fraunces y no Instrument Serif: aquella tiene UN peso (400) y mucho
	   contraste entre trazo grueso y fino, así que a 56px sobre el navy del
	   panel el titular se veía frágil, casi despintado. Fraunces es variable
	   —peso y tamaño óptico— y da el mismo gesto editorial con cuerpo. Se
	   pide con `font-optical-sizing: auto` en cada titular. */
	--fu-font-serif: "Fraunces", "Iowan Old Style", Georgia,
		"Times New Roman", serif;

	/* --- Neutros ---------------------------------------------- */
	--fu-white: #ffffff;
	--fu-slate-100: #f1f5f9;
	--fu-slate-300: #cbd5e1;
	--fu-slate-400: #94a3b8;

	/* --- Error: el mockup no lo contempla, Laravel sí lo produce */
	--fu-danger: #dc2626;

	/* --- Radios ----------------------------------------------- */
	--fu-radius-sm: 6px;
	--fu-radius: 10px;
	--fu-radius-md: 12px;

	/* --- Sombras ---------------------------------------------- */
	--fu-shadow-orange: 0 8px 24px rgba(245, 165, 36, 0.32);

	/* Anillo de foco: uno solo para toda la pantalla */
	--fu-ring: 0 0 0 3px rgba(245, 165, 36, 0.35);
	--fu-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.18);

	/* --- Movimiento ------------------------------------------- */
	--fu-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--fu-duration: 160ms;
}

/* Quien pida menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}