/* TocaYAvanza v2 — Variables (fuente canónica) */

:root {
  /* Primary — púrpura cálido */
  --primary:        #6d65ad;
  --primary-light:  #8f89c4;
  --primary-dark:   #4f4a8a;
  --primary-subtle: #f0effe;

  /* Semánticos */
  --success:        #10b981;
  --success-subtle: #ecfdf5;
  --warning:        #f59e0b;
  --warning-subtle: #fffbeb;
  --danger:         #ef4444;
  --danger-subtle:  #fef2f2;
  --info:           #3b82f6;
  --info-subtle:    #eff6ff;

  /* Superficies */
  --bg:             #f5f5f7;
  --card:           #ffffff;
  --border:         #e5e7eb;
  --border-strong:  #d1d5db;

  /* Texto */
  --text:           #111827;
  --text-muted:     #6b7280;
  --text-subtle:    #9ca3af;

  /* Sidebar */
  --sidebar-bg:     #1e1b4b;
  --sidebar-text:   #c7d2fe;
  --sidebar-active: #6d65ad;

  /* Tipografía */
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   28px;

  /* Pesos */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

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

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

  /* Sombras */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg:  0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);

  --transition: 150ms ease;
}

@keyframes toastIn  { from { opacity:0; transform: translateX(40px) scale(0.95); } to { opacity:1; transform: none; } }
@keyframes toastOut { from { opacity:1; transform: none; } to { opacity:0; transform: translateX(40px) scale(0.95); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes modalBgIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } }