/* ═══════════════════════════════════════════════════════════════════════════
   Tokens de diseño unificados — fuente única de verdad para admin y frontend
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Colores — mismo azul primario y paleta que hoy existe en ambos lados */
  --vc-color-primary:       #4D6AE0;
  --vc-color-primary-ink:   #1A1F36;
  --vc-color-muted:         #6B7494;
  --vc-color-border:        #E3E5EE;
  --vc-color-border-soft:   #F0F1F7;
  --vc-color-surface:       #FFFFFF;
  --vc-color-bg-subtle:     #FAFAFD;
  --vc-color-chip-bg:       #ECEEF5;
  --vc-color-success-bg:    #E8F5EF;
  --vc-color-success-ink:   #1B7A50;
  --vc-color-warning-bg:    #FFF4E5;
  --vc-color-warning-ink:   #B54708;
  --vc-color-danger-bg:     #FEF3F2;
  --vc-color-danger-ink:    #B42318;
  --vc-color-disabled:      #C8CADE;

  /* Tipografía */
  --vc-font-sans: -apple-system, "Segoe UI", Roboto, Inter, sans-serif;

  /* Espaciado — escala 4px */
  --vc-space-1: 4px;
  --vc-space-2: 8px;
  --vc-space-3: 12px;
  --vc-space-4: 16px;
  --vc-space-5: 20px;
  --vc-space-6: 24px;

  /* Radios de borde */
  --vc-radius-s: 8px;
  --vc-radius-m: 10px;
  --vc-radius-l: 14px;
  --vc-radius-pill: 9999px;

  /* Sombras */
  --vc-shadow-s: 0 1px 2px rgba(16, 24, 40, 0.04);
  --vc-shadow-m: 0 4px 16px rgba(0, 0, 0, 0.07);
  --vc-shadow-modal: 0 20px 50px rgba(16, 24, 40, 0.22);
}

/* Foco visible para accesibilidad — común a admin y frontend */
:focus-visible {
  outline: 2px solid var(--vc-color-primary);
  outline-offset: 2px;
}