/* ============================================================
   CENTINELA SMART — variables.css
   Fuente única de verdad para colores, fuentes y espaciado.
   Cambia aquí y todo el sitio se actualiza automáticamente.
   ============================================================ */

:root {
  /* --- COLORES PRINCIPALES --- */
  --bg-deep:        #050a15;   /* Fondo principal: azul oscuro profundo */
  --bg-surface:     #080e1c;   /* Superficies de cards */
  --bg-elevated:    #0d1526;   /* Cards elevadas / hover */
  --bg-border:      #0f1e35;   /* Bordes sutiles */

  /* Acento primario: Verde Cian */
  --cyan:           #00f5d4;
  --cyan-dim:       rgba(0, 245, 212, 0.15);
  --cyan-glow:      rgba(0, 245, 212, 0.35);

  /* Acento secundario: Azul marino del logo */
  --navy:           #1a3a6e;
  --navy-bright:    #2455a4;

  /* Textos */
  --text-primary:   #e8f4f8;   /* Texto principal: casi blanco azulado */
  --text-secondary: #7a9bb5;   /* Texto secundario: gris azulado */
  --text-muted:     #3d5a73;   /* Texto terciario / etiquetas */

  /* Estados */
  --success:        #00f5d4;
  --warning:        #f5a623;
  --danger:         #ff4757;

  /* --- TIPOGRAFÍA --- */
  /* Orbitron: para títulos (futurista/geométrico) */
  /* JetBrains Mono: para detalles técnicos monoespaciados */
  /* Exo 2: para cuerpo de texto (legible y técnico) */
  --font-display:   'Orbitron', monospace;
  --font-mono:      'JetBrains Mono', monospace;
  --font-body:      'Exo 2', sans-serif;

  /* Escala de tamaños */
  --text-xs:   0.7rem;
  --text-sm:   0.85rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.35rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  4rem;

  /* --- ESPACIADO --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* --- EFECTOS --- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* Sombra con brillo cian */
  --shadow-cyan:  0 0 20px rgba(0, 245, 212, 0.2),
                  0 0 60px rgba(0, 245, 212, 0.08);
  --shadow-card:  0 4px 24px rgba(0, 0, 0, 0.5),
                  0 0 0 1px rgba(0, 245, 212, 0.05);

  /* --- TRANSICIONES --- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.6s ease;

  /* --- LAYOUT --- */
  --max-width: 1200px;
  --nav-height: 70px;
}