/* =====================================================
   assets/css/variables.css
   Tokens de diseño — colores, fuentes, espaciados.
   Cambia aquí y afecta todo el sistema.
===================================================== */

:root {

  /* ── Colores base ────────────────────────────── */
  --bg:          #f4f6f9;
  --white:       #ffffff;
  --border:      #e3e8ef;
  --border-dark: #cbd5e1;
  --text:        #111827;
  --text-soft:   #374151;
  --muted:       #6b7280;
  --muted-light: #9ca3af;

  /* ── Colores de acción ───────────────────────── */
  --primary:     #2563eb;
  --primary-h:   #1d4ed8;
  --primary-s:   #dbeafe;

  --success:     #059669;
  --success-s:   #d1fae5;

  --danger:      #dc2626;
  --danger-s:    #fee2e2;

  --warning:     #d97706;
  --warning-s:   #fef3c7;

  --info:        #0891b2;
  --info-s:      #cffafe;

  /* ── Sidebar ─────────────────────────────────── */
  --sidebar-bg:      #13192a;
  --sidebar-border:  rgba(255,255,255,0.06);
  --sidebar-text:    rgba(255,255,255,0.5);
  --sidebar-active:  rgba(37,99,235,0.25);
  --sidebar-hover:   rgba(255,255,255,0.06);
  --sidebar-width:   220px;

  /* ── Tipografía ──────────────────────────────── */
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  24px;

  /* ── Espaciados ──────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;

  /* ── Bordes y sombras ────────────────────────── */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow:    0 1px 4px rgba(0,0,0,0.06), 0 4px 20px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.18);

  /* ── Transiciones ────────────────────────────── */
  --transition: all .15s ease;
}

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

body {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  color:       var(--text);
  background:  var(--bg);
  min-height:  100vh;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration:none; color:inherit; }
button { font-family:var(--font-sans); cursor:pointer; }
input, select, textarea { font-family:var(--font-sans); }