/* VARIABLES — Sistema visual OroBot Scanner (terminal cyberpunk)
   Única fuente de color, tipografía y espaciado. Los nombres "legacy" del final mantienen
   compatibles los estilos en línea que todavía usan los módulos existentes. */

:root {
  /* Paleta */
  --c-bg: #05070D;
  --c-bg-2: #0A0F1C;
  --c-card: #101827;
  --c-card-2: #0D1422;
  --c-cyan: #00D9FF;
  --c-violet: #8B5CF6;
  --c-green: #00F5A0;
  --c-red: #FF3B6B;
  --c-gold: #F5C451;
  --c-amber: #FFB547;
  --c-text: #EAF2FF;
  --c-text-2: #718096;
  --c-text-3: #8896AB;          /* secundario sobre tarjetas: más contraste que --c-text-2 */

  /* Transparencias derivadas */
  --c-cyan-a08: rgba(0, 217, 255, 0.08);
  --c-cyan-a15: rgba(0, 217, 255, 0.15);
  --c-cyan-a30: rgba(0, 217, 255, 0.30);
  --c-violet-a12: rgba(139, 92, 246, 0.12);
  --c-violet-a30: rgba(139, 92, 246, 0.30);
  --c-green-a12: rgba(0, 245, 160, 0.12);
  --c-green-a30: rgba(0, 245, 160, 0.30);
  --c-red-a12: rgba(255, 59, 107, 0.12);
  --c-red-a30: rgba(255, 59, 107, 0.32);
  --c-gold-a12: rgba(245, 196, 81, 0.12);
  --c-gold-a30: rgba(245, 196, 81, 0.32);
  --c-amber-a12: rgba(255, 181, 71, 0.12);

  /* Superficies y líneas */
  --line: rgba(120, 180, 255, 0.10);
  --line-2: rgba(120, 180, 255, 0.18);
  --line-glow: rgba(0, 217, 255, 0.35);
  --glass: rgba(16, 24, 39, 0.72);
  --glass-2: rgba(10, 15, 28, 0.82);
  --input: #070B15;

  /* Tipografía */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Forma: esquinas casi rectas, con corte angular en tarjetas destacadas */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --cut: 12px;

  /* Sombras y brillos (discretos) */
  --shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.9);
  --glow-cyan: 0 0 0 1px rgba(0, 217, 255, 0.22), 0 0 22px -8px rgba(0, 217, 255, 0.55);
  --glow-green: 0 0 16px -6px rgba(0, 245, 160, 0.6);
  --glow-red: 0 0 16px -6px rgba(255, 59, 107, 0.6);
  --glow-gold: 0 0 20px -8px rgba(245, 196, 81, 0.6);

  /* Espaciado y medidas del layout */
  --gap: 16px;
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 64px;

  /* Movimiento */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 120ms;
  --t: 200ms;

  /* ---------------------------------------------------------------- Legacy */
  --bg-base: var(--c-bg);
  --bg-surface: var(--c-bg-2);
  --bg-card: var(--c-card);
  --bg-card-hover: #152036;
  --bg-input: var(--input);
  --border-subtle: var(--line);
  --border-card: var(--line-2);
  --border-focus: var(--c-cyan);
  --text-primary: var(--c-text);
  --text-secondary: var(--c-text-3);
  --text-muted: var(--c-text-2);
  --accent-blue: var(--c-cyan);
  --accent-blue-hover: #33E1FF;
  --accent-cyan: var(--c-cyan);
  --accent-green: var(--c-green);
  --accent-green-soft: var(--c-green-a12);
  --accent-red: var(--c-red);
  --accent-red-soft: var(--c-red-a12);
  --accent-amber: var(--c-gold);
  --accent-amber-soft: var(--c-gold-a12);
  --radius-xs: var(--r-xs);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card: var(--shadow);
}