/* ═══════════════════════════════════════════════════════════════════════════
   Astra Vision · tokens
   Heredados de la PWA (frontend/src/routes/layout.css) para que la web
   comercial y el producto se reconozcan como la misma marca.

   Una regla gobierna el color y no se rompe en ninguna sección:
     · Rojo señal  = amenaza, detección, alerta. Nunca decoración.
     · Burdeos     = profundidad de marca. Fondos y bordes, nunca texto de aviso.
     · Hueso       = confirmación y acción principal.
     · Verde       = estado correcto, igual que los conos del mapa táctico.

   Sistema de radios, uno solo en toda la página:
     interactivo (botón, chip)  → 999px
     tarjeta / panel            → 20px
     elemento pequeño           → 12px
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	/* ── Superficies ─────────────────────────────────────────────────────── */
	--surface-0: #07080b;
	--surface-1: #0e1015;
	--surface-2: #161920;
	--surface-3: #1d212a;
	--surface-glass: rgba(22, 24, 31, 0.72);
	--glass-fill: rgba(255, 255, 255, 0.07);
	--glass-blur: 28px;

	/* ── Líneas ──────────────────────────────────────────────────────────── */
	--line: rgba(255, 255, 255, 0.08);
	--line-strong: rgba(255, 255, 255, 0.15);
	--line-signal: rgba(211, 21, 36, 0.34);

	/* ── Señal y marca ───────────────────────────────────────────────────── */
	--signal: #d31524;
	--signal-bright: #ff5964;
	--signal-dim: rgba(211, 21, 36, 0.16);

	/* Burdeos: el rojo de marca llevado a fondo. Da profundidad sin gritar. */
	--burgundy: #5e0f19;
	--burgundy-deep: #38080f;
	--burgundy-veil: rgba(94, 15, 25, 0.4);

	--success: #48b98b;
	--success-dim: rgba(72, 185, 139, 0.14);

	/* ── Texto ───────────────────────────────────────────────────────────── */
	--text-1: #f4f2ee;
	--text-2: #c8c6ca;
	--text-3: #9a9ba3;
	--text-4: #6f7079;

	/* ── Sombras ─────────────────────────────────────────────────────────── */
	--shadow-surface: 0 18px 48px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	--shadow-float: 0 28px 72px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.13);
	--shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.38);

	/* ── Movimiento ──────────────────────────────────────────────────────── */
	/* `out` para entradas y salidas normales; `spring` solo donde un elemento
	   debe sentirse físico (aparición de panel, marca de éxito). */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	--t-fast: 140ms;
	--t-base: 220ms;
	--t-slow: 420ms;

	/* ── Formas ──────────────────────────────────────────────────────────── */
	--r-pill: 999px;
	--r-card: 20px;
	--r-small: 12px;

	/* ── Tipografía ──────────────────────────────────────────────────────── */
	--font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-instrument: 'Chakra Petch', 'Inter', ui-sans-serif, system-ui, sans-serif;

	/* ── Rejilla ─────────────────────────────────────────────────────────── */
	--wrap: 1200px;
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--nav-h: 68px;
	--section-y: clamp(4.5rem, 11vw, 8.5rem);
}