/* ============================================================
   variables.css — Design Tokens & Theming
   ============================================================ */

:root {
  /* Colores dinámicos (sobrescritos por JS con datos de empresa) */
  --primary:         #2563EB;
  --primary-light:   #3B82F6;
  --primary-dark:    #1D4ED8;
  --secondary:       #7C3AED;
  --secondary-light: #8B5CF6;

  /* Grises */
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* Semánticos */
  --bg:        #F5F7FA;
  --surface:   #FFFFFF;
  --surface2:  #F3F4F6;
  --text:      #1F2937;
  --text-muted:#6B7280;
  --border:    #E5E7EB;
  --shadow:    0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.12);

  /* Estados */
  --success:  #10B981;
  --warning:  #F59E0B;
  --danger:   #EF4444;
  --info:     #3B82F6;

  /* Layout */
  --nav-height:   64px;
  --header-h:     56px;
  --radius:       12px;
  --radius-sm:    8px;
  --radius-lg:    20px;
  --transition:   0.2s cubic-bezier(0.4,0,0.2,1);

  /* Typography */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ── Dark Mode ───────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:        #0F172A;
  --surface:   #1E293B;
  --surface2:  #273347;
  --text:      #F1F5F9;
  --text-muted:#94A3B8;
  --border:    #334155;
  --shadow:    0 1px 3px rgba(0,0,0,.40);
  --shadow-md: 0 4px 6px rgba(0,0,0,.30);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.50);
}

/* Skeleton shimmer */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* Fade-in entrada de módulos */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}