/* vl-theme.css
   Sistema de colores, espaciamiento, sombras y variables globales
   VocesLaborales - Minimal moderno, base azul profesional
*/

:root {
  /* Colores principales */
  --vl-color-primary: #2563eb;          /* Azul principal (CTAs, links fuertes) */
  --vl-color-primary-soft: #dbeafe;     /* Fondo suave para secciones destacadas */
  --vl-color-primary-hover: #1d4ed8;
  --vl-color-primary-active: #1e40af;

  /* Secundario (mensajes positivos, highlights) */
  --vl-color-secondary: #10b981;        /* Verde confianza */
  --vl-color-secondary-soft: #d1fae5;

  /* Neutrales */
  --vl-color-bg: #ffffff;
  --vl-color-bg-soft: #f5f5f7;
  --vl-color-surface: #ffffff;
  --vl-color-surface-alt: #f9fafb;

  --vl-color-border-subtle: rgba(15, 23, 42, 0.06);
  --vl-color-border-strong: rgba(15, 23, 42, 0.12);

  --vl-color-text-main: #111827;
  --vl-color-text-muted: #6b7280;
  --vl-color-text-soft: #9ca3af;
  --vl-color-text-on-primary: #ffffff;

  /* Estados */
  --vl-color-success: #16a34a;
  --vl-color-success-soft: #dcfce7;

  --vl-color-warning: #ea580c;
  --vl-color-warning-soft: #fff7ed;

  --vl-color-danger: #dc2626;
  --vl-color-danger-soft: #fee2e2;

  /* Sombras y bordes */
  --vl-radius-xs: 4px;
  --vl-radius-sm: 6px;
  --vl-radius-md: 10px;
  --vl-radius-lg: 14px;
  --vl-radius-pill: 999px;

  --vl-shadow-soft: 0 8px 20px rgba(15, 23, 42, 0.06);
  --vl-shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.06);
  --vl-shadow-focus: 0 0 0 2px rgba(37, 99, 235, 0.15);

  /* Espaciado base (escala 4) */
  --vl-space-1: 4px;
  --vl-space-2: 8px;
  --vl-space-3: 12px;
  --vl-space-4: 16px;
  --vl-space-5: 20px;
  --vl-space-6: 24px;
  --vl-space-8: 32px;
  --vl-space-10: 40px;
  --vl-space-12: 48px;

  /* Breakpoints */
  --vl-breakpoint-sm: 640px;
  --vl-breakpoint-md: 768px;
  --vl-breakpoint-lg: 1024px;
  --vl-breakpoint-xl: 1280px;

  /* Transiciones y microinteracciones */
  --vl-transition-fast: 120ms ease-out;
  --vl-transition-normal: 180ms ease-out;
  --vl-transition-slow: 240ms ease-out;

  /* Altura base de header (para sticky spacing) */
  --vl-header-height: 64px;
}

/* Fondo general y debug de espacios excesivos */
body {
  background-color: var(--vl-color-bg-soft);
  color: var(--vl-color-text-main);
}