/**
 * FEDOVOLI Design System & Typography Tokens
 * Sistema unificado de Colores, Tipografías y Componentes
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
    /* Paleta Institucional FEDOVOLI & República Dominicana */
    --dom-blue: #002F6C;
    --dom-blue-dark: #001D45;
    --dom-blue-deep: #0b112c;
    --dom-blue-vibrant: #1522dd;
    --dom-blue-light: #0052B4;
    
    --dom-red: #CE1126;
    --dom-red-dark: #9B0D1C;
    --dom-red-vibrant: #e6192e;

    /* Acentos Deportivos FIVB */
    --fivb-lime: #cbf500;
    --fivb-dark: #0a0e27;
    --fivb-orange: #ff5722;
    --dom-gold: #ffb703;
    
    /* Tipografías Oficiales */
    --font-fivb: 'Montserrat', sans-serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Tipografía FIVB de Alto Impacto */
.font-fivb {
    font-family: var(--font-fivb) !important;
    letter-spacing: -0.01em;
}

/* Tipografía de Lectura Limpia */
.font-sans {
    font-family: var(--font-sans) !important;
}

/* Clases de Fondo y Texto Reutilizables */
.bg-dom-blue { background-color: var(--dom-blue) !important; }
.bg-dom-blue-dark { background-color: var(--dom-blue-dark) !important; }
.bg-dom-blue-deep { background-color: var(--dom-blue-deep) !important; }
.bg-dom-blue-vibrant { background-color: var(--dom-blue-vibrant) !important; }
.bg-dom-red { background-color: var(--dom-red) !important; }
.bg-dom-red-dark { background-color: var(--dom-red-dark) !important; }
.text-dom-blue { color: var(--dom-blue) !important; }
.text-dom-red { color: var(--dom-red) !important; }
.border-dom-blue { border-color: var(--dom-blue) !important; }
.border-dom-red { border-color: var(--dom-red) !important; }

/* Botones rectangulares de altura completa para Topbar (Estilo FIVB) */
.topbar-btn {
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    font-family: var(--font-fivb);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    white-space: nowrap;
}

/* Animaciones */
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}
.animate-live-dot {
    animation: pulseDot 1.5s infinite ease-in-out;
}