/* =========================================
   css/base/variables.css
   Design Tokens — fuente única de verdad
   para colores, tipografía y espaciado.
========================================= */
:root {

  /* --- Fondos --- */
  --bg-white:       #ffffff;
  --bg-slate-50:    #f8fafc;
  --bg-slate-100:   #f1f5f9;
  --bg-slate-900:   #0f172a;
  --bg-slate-950:   #020617;

  /* --- Textos --- */
  --text-white:     #ffffff;
  --text-slate-400: #94a3b8;
  --text-slate-500: #64748b;
  --text-slate-600: #475569;
  --text-slate-800: #1e293b;
  --text-slate-900: #0f172a;

  /* --- Bordes --- */
  --border-slate-200: #e2e8f0;
  --border-slate-300: #cbd5e1;

  /* --- Azules (Acción Principal) --- */
  --color-blue-50:  #eff6ff;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;

  /* --- Rojos (Peligro / Cerrar Sesión) --- */
  --color-red-50:   #fef2f2;
  --color-red-600:  #dc2626;

  /* --- Verdes (Éxito) --- */
  --color-green-50:  #ecfdf5;
  --color-green-100: #d1fae5;
  --color-green-600: #059669;
  --color-green-700: #065f46;

  /* --- Amarillos (Cargando / Advertencia) --- */
  --color-amber-50:  #fffbeb;
  --color-amber-500: #f59e0b;

  /* --- Tipografía --- */
  --font-main: 'Segoe UI', system-ui, sans-serif;

  /* --- Sombras --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);

  /* --- Radios de borde --- */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* --- Transiciones --- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;

  /* --- Dimensiones de Layout --- */
  --sidebar-width:        260px;
  --topbar-height:        80px;
  --mobile-header-height: 64px;
}