/* ===================== EQUUS · Design Tokens ===================== */
:root {
  /* Marca: violeta (cruz del logo) + celeste + crema */
  --violet-50:  #f6f3ff;
  --violet-100: #ede7fe;
  --violet-200: #ddd2fc;
  --violet-300: #c3b0f9;
  --violet-400: #a883f2;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;   /* primario */
  --violet-700: #6d28d9;
  --violet-800: #5b21b6;
  --violet-900: #4c1d95;

  --celeste-300: #7dd3fc;
  --celeste-400: #38bdf8;
  --celeste-500: #0ea5e9;

  --magenta: #db2777;       /* acento promos */
  --mint:    #10b981;       /* ok / verde */
  --amber:   #f59e0b;       /* alertas */
  --red:     #ef4444;       /* peligro */

  --ink:     #211c32;
  --ink-soft:#4b4563;
  --muted:   #8b85a3;
  --line:    #ece8f6;
  --line-2:  #f4f1fb;
  --cream:   #faf8ff;
  --white:   #ffffff;
  --panel:   #ffffff;

  /* Tipografia */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Sora', 'Inter', system-ui, sans-serif;

  /* Radios */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 22px;  --r-full: 999px;

  /* Sombras */
  --sh-sm: 0 1px 2px rgba(33,28,50,.06), 0 1px 3px rgba(33,28,50,.05);
  --sh-md: 0 6px 18px rgba(91,33,182,.08);
  --sh-lg: 0 18px 50px rgba(91,33,182,.16);
  --sh-pop: 0 12px 36px rgba(33,28,50,.18);

  /* Easing (curvas fuertes, no las debiles del navegador) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Espaciado base 4px */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;

  --sidebar-w: 248px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
a { color: var(--violet-700); text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--violet-200); }

/* Scrollbar fino */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--violet-200); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--violet-300); background-clip: padding-box; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}