/**
 * FLOWSYSTEMS - SISTEMA DE VARIABLES Y TOKENS DE DISEÑO
 * Paleta corporativa premium y parámetros de diseño visual.
 * Todos los comentarios y documentación en español según requerimiento.
 */

:root {
  /* ==========================================================================
     PALETA DE COLORES PRINCIPALES (MODO OSCURO / HERO Y SECCIONES TECH)
     ========================================================================== */
  --bg-primary: #050B16;          /* Fondo principal: azul casi negro */
  --bg-secondary: #08182B;        /* Fondos secundarios: azul oscuro profundo */
  --bg-card: rgba(8, 24, 43, 0.65); /* Fondo de tarjetas con efecto cristal */
  --bg-card-hover: rgba(12, 32, 58, 0.85); /* Fondo de tarjetas al posar cursor */
  
  /* ==========================================================================
     COLORES DE ACENTO E ILUMINACIÓN AZUL
     ========================================================================== */
  --color-electric: #0875FF;      /* Azul eléctrico principal */
  --color-bright: #00B7FF;        /* Azul brillante / Cian tecnológico */
  --color-electric-glow: rgba(8, 117, 255, 0.35); /* Halo azul eléctrico */
  --color-bright-glow: rgba(0, 183, 255, 0.25);   /* Halo azul brillante */
  --color-success: #10B981;       /* Verde de estado exitoso / online */
  --color-warning: #F59E0B;       /* Ámbar de advertencia / proceso */

  /* ==========================================================================
     TEXTO Y TIPOGRAFÍA PARA FONDOS OSCUROS
     ========================================================================== */
  --text-main: #F7FAFF;           /* Blanco nieve para títulos principales */
  --text-secondary: #A8B7CC;      /* Gris azulado para descripciones y subtítulos */
  --text-muted: #64748B;          /* Gris atenuado para notas secundarias */

  /* ==========================================================================
     SECCIONES DE FONDO CLARO (CONTRASTE EDITORIAL)
     ========================================================================== */
  --bg-light: #F4F8FF;            /* Blanco frío para secciones de contraste */
  --bg-light-surface: #FFFFFF;    /* Blanco puro para tarjetas en fondo claro */
  --text-dark-main: #0B192C;      /* Azul marino muy oscuro para texto en fondo claro */
  --text-dark-secondary: #485970; /* Gris azulado medio para párrafos en fondo claro */
  --border-light: rgba(8, 117, 255, 0.12); /* Borde sutil en fondo claro */
  --border-light-hover: rgba(8, 117, 255, 0.3); /* Borde hover en fondo claro */

  /* ==========================================================================
     BORDES TRANSLÚCIDOS Y LÍNEAS TÉCNICAS
     ========================================================================== */
  --border-subtle: rgba(8, 117, 255, 0.18); /* Azul translúcido con baja opacidad */
  --border-hover: rgba(0, 183, 255, 0.45);  /* Azul brillante al interactuar */
  --border-card: rgba(255, 255, 255, 0.08); /* Borde suave perimetral */

  /* ==========================================================================
     GRADIENTES
     ========================================================================== */
  --gradient-electric: linear-gradient(135deg, #0875FF 0%, #00B7FF 100%);
  --gradient-text: linear-gradient(90deg, #0875FF 0%, #00B7FF 100%);
  --gradient-card: linear-gradient(180deg, rgba(12, 28, 48, 0.7) 0%, rgba(5, 11, 22, 0.85) 100%);
  --gradient-glow: radial-gradient(circle at 50% 0%, rgba(8, 117, 255, 0.2) 0%, transparent 70%);

  /* ==========================================================================
     TIPOGRAFÍA Y FAMILIAS
     ========================================================================== */
  --font-family-primary: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ==========================================================================
     MEDIDAS, ESPACIADOS Y RADIOS DE BORDE
     ========================================================================== */
  --container-max-width: 1240px;
  --header-height: 80px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* ==========================================================================
     SOMBRAS Y PROFUNDIDAD
     ========================================================================== */
  --shadow-card-dark: 0 16px 36px -12px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(8, 117, 255, 0.1);
  --shadow-card-light: 0 16px 32px -8px rgba(8, 24, 43, 0.06), 0 1px 2px rgba(8, 117, 255, 0.05);
  --shadow-button-glow: 0 6px 24px rgba(8, 117, 255, 0.45);
  --shadow-mockup: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 45px rgba(8, 117, 255, 0.2);

  /* ==========================================================================
     TRANSICIONES
     ========================================================================== */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}