/**
 * AFINA Search — Design tokens
 * Fuente única de verdad para colores, tipografía y espaciado.
 * Importado por search-overlay.css y search-overlay-mobile.css.
 * Modificar aquí afecta a ambos overlays automáticamente.
 */

:root {
  /* ── Colores de marca ─────────────────────────────────────── */
  --afina-blue:        #2E508A;
  --afina-blue-dark:   #1e3d70;
  --afina-blue-light:  #eef2f9;
  --afina-yellow:      #FFD931;
  --afina-yellow-dark: #c9a800;
  --afina-gray:        #686868;
  --afina-gray-light:  #f4f5f7;

  /* ── Texto ────────────────────────────────────────────────── */
  --afina-text:        #111827;
  --afina-text-light:  #6b7280;
  --afina-text-muted:  #9ca3af;

  /* ── Bordes y fondos ──────────────────────────────────────── */
  --afina-border:      #e2e8f0;
  --afina-bg:          #ffffff;

  /* ── Tipografía ───────────────────────────────────────────── */
  --afina-font:        'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --afina-font-mono:   ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  /* ── Espaciado base ───────────────────────────────────────── */
  --afina-radius:      6px;
  --afina-radius-lg:   10px;
  --afina-radius-xl:   16px;

  /* ── Sombras ──────────────────────────────────────────────── */
  --afina-shadow:      0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.1);
  --afina-shadow-sm:   0 2px 8px rgba(0,0,0,.08);

  /* ── Animaciones ──────────────────────────────────────────── */
  --afina-transition:  .15s ease;
  --afina-transition-slow: .25s ease;

  /* ── Tarjeta de producto ──────────────────────────────────── */
  --afina-card-radius: 8px;
  --afina-card-bg:     #ffffff;
  --afina-card-border: #e8ecf0;

  /* ── Z-index ──────────────────────────────────────────────── */
  --afina-z-overlay:   2147483647;
  --afina-z-adminbar:  2147483646;
}