/* =====================================================================
   Valle Lindo — CSS Core
   Variables base, reset, tipografía y utilidades fundamentales.
   Los themes (palantir-dark, vallelindo-dark, etc.) sobrescriben las
   variables --vl-* desde themes.css.
   ===================================================================== */

:root {
  /* Tipografía */
  --vl-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vl-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --vl-font-display: 'Plus Jakarta Sans', sans-serif;

  /* Tamaños */
  --vl-text-xs:   11px;
  --vl-text-sm:   12px;
  --vl-text-base: 14px;
  --vl-text-md:   15px;
  --vl-text-lg:   18px;
  --vl-text-xl:   22px;
  --vl-text-2xl:  28px;
  --vl-text-3xl:  36px;

  /* Espaciado */
  --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;

  /* Radios */
  --vl-radius-sm: 4px;
  --vl-radius:    8px;
  --vl-radius-md: 10px;
  --vl-radius-lg: 12px;
  --vl-radius-xl: 16px;
  --vl-radius-full: 9999px;

  /* Sombras */
  --vl-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --vl-shadow:    0 2px 8px rgba(0,0,0,0.3);
  --vl-shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --vl-shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
  --vl-shadow-xl: 0 16px 48px rgba(0,0,0,0.5);

  /* Layout */
  --vl-sidebar-w: 260px;
  --vl-topbar-h:  56px;

  /* Transiciones */
  --vl-transition: all 0.15s ease;
  --vl-transition-slow: all 0.3s ease;

  /* COLORES (default = Palantir Dark, sobrescribe themes.css) */
  --vl-bg-primary:   #0A192F;
  --vl-bg-secondary: #0F2540;
  --vl-bg-card:      #172A45;
  --vl-bg-card-hover:#1E3357;
  --vl-bg-input:     #0A192F;
  --vl-text-primary: #E6F1FF;
  --vl-text-secondary: #A8B2D1;
  --vl-text-muted:   #8892B0;
  --vl-accent:       #64FFDA;
  --vl-accent-2:     #5EEAD4;
  --vl-accent-dim:   rgba(100, 255, 218, 0.12);
  --vl-success:      #22C55E;
  --vl-warning:      #FBBF24;
  --vl-danger:       #EF4444;
  --vl-info:         #60A5FA;
  --vl-border:       #1E3A5F;
  --vl-border-hover: #2E4A6F;
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--vl-font-sans);
  font-size: var(--vl-text-base);
  background: var(--vl-bg-primary);
  color: var(--vl-text-primary);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s, color 0.3s;
}

img, svg, video { display: block; max-width: 100%; }

button, input, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

a { color: var(--vl-accent); text-decoration: none; transition: var(--vl-transition); }
a:hover { color: var(--vl-accent-2); }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--vl-bg-primary); }
::-webkit-scrollbar-thumb { background: var(--vl-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--vl-border-hover); }

/* --- Utilidades básicas --- */
.vl-container { width: 100%; padding: 0 var(--vl-space-6); }
.vl-flex { display: flex; }
.vl-grid { display: grid; }
.vl-hidden { display: none !important; }
.vl-mono { font-family: var(--vl-font-mono); }

/* --- Estados de carga --- */
.vl-skeleton {
  background: linear-gradient(90deg, var(--vl-bg-card) 25%, var(--vl-bg-card-hover) 50%, var(--vl-bg-card) 75%);
  background-size: 200% 100%;
  animation: vlSkeleton 1.5s infinite;
  border-radius: var(--vl-radius);
}
@keyframes vlSkeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}