/* variables.css — Design System para Suite de Video Intelligence */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Paleta de colores ─────────────────────────────── */
  --clr-bg-900:       #080c12;
  --clr-bg-800:       #0f1620;
  --clr-bg-700:       #151d2b;
  --clr-bg-600:       #1c2537;
  --clr-bg-500:       #243044;
  --clr-surface:      rgba(255,255,255,0.04);
  --clr-surface-hi:   rgba(255,255,255,0.08);

  /* Azul eléctrico — primario */
  --clr-blue-400:     #4dabf7;
  --clr-blue-500:     #228be6;
  --clr-blue-600:     #1971c2;
  --clr-blue-glow:    rgba(34, 139, 230, 0.25);

  /* Rojo emergencia */
  --clr-red-400:      #ff6b6b;
  --clr-red-500:      #fa5252;
  --clr-red-600:      #e03131;
  --clr-red-glow:     rgba(250, 82, 82, 0.25);

  /* Amarillo alerta */
  --clr-yellow-400:   #ffd43b;
  --clr-yellow-500:   #fab005;

  /* Verde OK */
  --clr-green-400:    #69db7c;
  --clr-green-500:    #40c057;

  /* Texto */
  --clr-text-100:     #f1f3f5;
  --clr-text-300:     #ced4da;
  --clr-text-500:     #868e96;
  --clr-text-700:     #495057;

  /* Bordes */
  --clr-border:       rgba(255,255,255,0.08);
  --clr-border-hi:    rgba(255,255,255,0.16);

  /* ── Tipografía ────────────────────────────────────── */
  --font-sans:        'Inter', system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-md:    1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;

  /* ── Espaciado ─────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ── Bordes redondeados ────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ── Sombras ───────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-blue: 0 0 20px var(--clr-blue-glow);
  --shadow-red:  0 0 20px var(--clr-red-glow);

  /* ── Transiciones ──────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Prioridades (colores) ─────────────────────────── */
  --priority-baja:    var(--clr-text-500);
  --priority-normal:  var(--clr-blue-400);
  --priority-alta:    var(--clr-yellow-400);
  --priority-critica: var(--clr-red-400);
}