/* ============================================================
   Actuaria · Layout tokens — espaciado, radios, sombras,
   z-index y movimiento.
   Base de espaciado 4px. Sombras suaves (no neumorfismo):
   superficies limpias, elevación sutil.
   ============================================================ */
:root {
  /* ── Espaciado (base 4px) ────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ── Radios ──────────────────────────────────────────── */
  --r-sm:   6px;   /* inputs, chips pequeños */
  --r-md:   10px;  /* botones, tarjetas estándar */
  --r-lg:   16px;  /* tarjetas grandes, paneles */
  --r-xl:   20px;  /* hero, módulos destacados */
  --r-full: 999px; /* píldoras, avatares */

  /* ── Sombras (elevación) ─────────────────────────────── */
  --shadow-sm:      0 1px 2px 0 rgba(21,31,71,0.05);
  --shadow-md:      0 4px 6px -1px rgba(21,31,71,0.07), 0 2px 4px -1px rgba(21,31,71,0.04);
  --shadow-card:    0 8px 8px -4px rgba(21,31,71,0.04), 0 20px 24px -4px rgba(21,31,71,0.08);
  --shadow-xl:      0 24px 48px -8px rgba(21,31,71,0.12), 0 8px 16px -4px rgba(21,31,71,0.06);
  --shadow-focus:   0 0 0 3px rgba(48,97,170,0.25); /* anillo de foco azul */

  /* ── Z-index ─────────────────────────────────────────── */
  --z-base:    1;   /* @kind other */
  --z-sticky:  100; /* @kind other */
  --z-header:  200; /* @kind other */
  --z-sidebar: 300; /* @kind other */
  --z-overlay: 400; /* @kind other */
  --z-modal:   500; /* @kind other */
  --z-toast:   600; /* @kind other */

  /* ── Movimiento ──────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);    /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-normal:  220ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */

  /* ── Layout de producto ──────────────────────────────── */
  --sidebar-w:   272px;  /* @kind other */
  --header-h:    84px;   /* @kind other */
  --content-max: 1120px; /* @kind other */
}