/* ============================================================
   Suspicious Eyes Design System v1.0 — 2026-05-12
   Single source of truth para colores, espaciado y radio.
   Carga global desde public_layout.py y templates.py.

   Filosofía:
   - Acento PRIMARIO: magenta (--se-magenta) — para nav, CTA, focus, tab activo
   - Acento SECUNDARIO: mint/green (--se-mint) — para success states
   - Cyan (--se-inplay) reservado exclusivamente para datos en vivo (odds)
   - Semánticos (success/warning/danger) — solo para feedback de estado
   ============================================================ */

:root {
  /* ---------- Backgrounds ---------- */
  --se-bg-base:    #0a0a0b;
  --se-bg-surface: #111114;
  --se-bg-elevated:#181820;
  --se-bg-hover:   #1a1a22;

  /* ---------- Borders ---------- */
  --se-border-subtle: rgba(255,255,255,0.08);
  --se-border-mid:    rgba(255,255,255,0.14);
  --se-border-strong: rgba(255,255,255,0.22);

  /* ---------- Text ---------- */
  --se-text-0: #ffffff;
  --se-text-1: rgba(255,255,255,0.72);
  /* 2026-06-06 (UI-Sprint 3): contraste AA. Antes text-2=0.50 (3.6:1) y text-3=0.32
     (1.9:1) fallaban el mínimo 4.5:1 sobre el fondo oscuro. Subidos. */
  --se-text-2: rgba(255,255,255,0.64);
  --se-text-3: rgba(255,255,255,0.50);

  /* ---------- Brand (acento principal) ---------- */
  --se-magenta:        #e91e8c;
  --se-magenta-soft:   #ff4fa8;
  --se-magenta-deep:   #b6166e;
  --se-magenta-glow:   rgba(233,30,140,0.30);
  --se-magenta-bg-12:  rgba(233,30,140,0.12);
  --se-magenta-bg-18:  rgba(233,30,140,0.18);
  --se-magenta-bg-30:  rgba(233,30,140,0.30);

  /* ---------- Brand secundario (success/accent verde) ---------- */
  --se-mint:           #00ff88;
  --se-mint-soft:      #4dffaa;
  --se-mint-glow:      rgba(0,255,136,0.25);
  --se-mint-bg-12:     rgba(0,255,136,0.12);

  /* ---------- Semánticos ---------- */
  --se-success:        #22c55e;
  --se-success-bg:     rgba(34,197,94,0.12);
  --se-success-border: rgba(34,197,94,0.30);
  --se-warning:        #fbbf24;
  --se-warning-bg:     rgba(251,191,36,0.12);
  --se-warning-border: rgba(251,191,36,0.30);
  --se-danger:         #ef4444;
  --se-danger-bg:      rgba(239,68,68,0.12);
  --se-danger-border:  rgba(239,68,68,0.30);
  --se-info:           #6366f1;

  /* ---------- Datos en vivo (NO usar como nav/acento) ---------- */
  --se-inplay:         #00ffff;
  --se-inplay-glow:    rgba(0,255,255,0.20);
  --se-inplay-bg:      rgba(0,255,255,0.15);  /* fondo del pill in-play (UI-S3) */

  /* ---------- Espaciado (8pt grid) ---------- */
  --se-space-0:  0;
  --se-space-1:  4px;
  --se-space-2:  8px;
  --se-space-3:  12px;
  --se-space-4:  16px;
  --se-space-5:  24px;
  --se-space-6:  32px;
  --se-space-7:  48px;
  --se-space-8:  64px;

  /* ---------- Radius ---------- */
  --se-r-xs:  4px;
  --se-r-sm:  8px;
  --se-r-md:  14px;
  --se-r-lg:  20px;
  --se-r-xl:  28px;
  --se-r-full: 9999px;

  /* ---------- Shadows con glow magenta ---------- */
  --se-shadow-sm:   0 1px 2px rgba(0,0,0,0.3), 0 0 4px rgba(233,30,140,0.10);
  --se-shadow-md:   0 4px 8px rgba(0,0,0,0.4), 0 0 8px rgba(233,30,140,0.15);
  --se-shadow-lg:   0 10px 20px rgba(0,0,0,0.5), 0 0 16px rgba(233,30,140,0.20);
  --se-shadow-xl:   0 20px 40px rgba(0,0,0,0.6), 0 0 24px rgba(233,30,140,0.25);
  --se-shadow-glow: 0 0 20px var(--se-magenta-glow), 0 0 40px rgba(233,30,140,0.20);

  /* ---------- Tipografía ---------- */
  --se-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --se-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --se-fs-xs:  11px;
  --se-fs-sm:  13px;
  --se-fs-md:  15px;
  --se-fs-lg:  18px;
  --se-fs-xl:  22px;
  --se-fs-2xl: 28px;
  --se-fs-3xl: 36px;
  --se-fs-4xl: 48px;
  --se-fw-regular:  400;
  --se-fw-medium:   500;
  --se-fw-semibold: 600;
  --se-fw-bold:     700;
  --se-fw-black:    900;

  /* ---------- Transiciones ---------- */
  --se-tx-fast: 120ms ease;
  --se-tx-mid:  220ms ease;
  --se-tx-slow: 380ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Glass effects (legacy compat) ---------- */
  --se-glass-bg:     rgba(255,255,255,0.04);
  --se-glass-border: rgba(255,255,255,0.08);
  --se-glass-blur:   blur(12px);
}

/* ============================================================
   Aliases hacia tokens legacy del producto (compat retroactivo).
   Permite que templates.py, my_bets.html, bws.css adopten gradualmente
   sin romper nada. Cuando migran completamente, estos aliases se borran.
   ============================================================ */
:root {
  /* Aliases de templates.py legacy */
  --brand-magenta: var(--se-magenta);
  --accent: var(--se-magenta);
  --neon-magenta: var(--se-magenta);
  --neon-green: var(--se-mint);

  /* Semánticos compartidos */
  --success: var(--se-success);
  --warning: var(--se-warning);
  --danger:  var(--se-danger);

  /* Radius compat */
  --radius-sm: var(--se-r-sm);
  --radius-md: var(--se-r-md);
  --radius-lg: var(--se-r-lg);
  --radius-xl: var(--se-r-xl);
}

/* ============================================================
   prefers-reduced-motion: respeta preferencia OS
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --se-tx-fast: 0ms;
    --se-tx-mid:  0ms;
    --se-tx-slow: 0ms;
  }
}

/* ============================================================
   focus-visible global: anillo magenta consistente
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--se-magenta);
  outline-offset: 2px;
  border-radius: var(--se-r-xs);
}

/* ============================================================
   Pill components estandarizados (reutilizar en lugar de inline)
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--se-space-1);
  padding: 4px 10px;
  border-radius: var(--se-r-full);
  font-size: var(--se-fs-xs);
  font-weight: var(--se-fw-semibold);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.pill-success { background: var(--se-success-bg); color: var(--se-success); border-color: var(--se-success-border); }
.pill-warning { background: var(--se-warning-bg); color: var(--se-warning); border-color: var(--se-warning-border); }
.pill-danger  { background: var(--se-danger-bg);  color: var(--se-danger);  border-color: var(--se-danger-border);  }
.pill-magenta { background: var(--se-magenta-bg-12); color: var(--se-magenta); border-color: var(--se-magenta-bg-30); }
.pill-mint    { background: var(--se-mint-bg-12); color: var(--se-mint); border-color: rgba(0,255,136,0.30); }