:root {
    /* ── Paleta principal ── */
    --primary:       #10b981;
    --primary-dark:  #059669;
    --primary-light: #34d399;
    --secondary:     #6366f1;
    --danger:        #ef4444;
    --danger-dark:   #dc2626;
    --warning:       #f59e0b;
    --warning-dark:  #d97706;
    --info:          #3b82f6;   /* Azul info — antes hardcodeado */

    /* ── Fondos ── */
    --bg-dark:   #0f172a;
    --bg-panel:  #1e293b;
    --bg-card:   #334155;
    --bg-nav:    #111827;       /* Bottom nav — antes hardcodeado */
    --bg-input:  var(--bg-dark);

    /* ── Texto ── */
    --text-color: #f8fafc;
    --text-muted: #94a3b8;

    /* ── Bordes ── */
    --border-color: rgba(255, 255, 255, 0.1);

    /* ── Radios (diseño cuadrado) ── */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    /* Excepción funcional: elementos circulares (badges, avatares) */
    --radius-pill: 50%;
    --radius-chip: 4px;         /* Pills de estado tipo "Jugado", badges de texto */

    /* ── Sombras ── */
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    --shadow-glow-primary: 0 4px 10px rgba(16, 185, 129, 0.3);
    --shadow-glow-danger:  0 4px 10px rgba(239, 68, 68, 0.3);

    /* ── Alphas semánticos (evitar rgba() litearles en todo el código) ── */
    --primary-alpha-10: rgba(16, 185, 129, 0.10);
    --primary-alpha-15: rgba(16, 185, 129, 0.15);
    --primary-alpha-30: rgba(16, 185, 129, 0.30);
    --danger-alpha-10:  rgba(239, 68, 68, 0.10);
    --danger-alpha-30:  rgba(239, 68, 68, 0.30);
    --warning-alpha-10: rgba(245, 158, 11, 0.10);
    --info-alpha-10:    rgba(59, 130, 246, 0.10);
    --white-alpha-05:   rgba(255, 255, 255, 0.05);
    --white-alpha-08:   rgba(255, 255, 255, 0.08);
    --white-alpha-10:   rgba(255, 255, 255, 0.10);
}