/* ========================================
   THEME VARIABLES
   ======================================== */

:root {
    --bg-body: #050505;
    --bg-card: rgba(255, 255, 255, 0.03);
    --bg-header: #0a0a0a;
    --bg-hero: #0a0a0a;
    --text-main: #fff;
    --text-muted: #6b7280;
    --border-color: rgba(255, 255, 255, 0.05);
    --accent: #1ed760;
    --card-hover: rgba(255, 255, 255, 0.05);
}

[data-theme='light'] {
    --bg-body: #f8fafc;
    --bg-card: #ffffff;
    --bg-header: #ffffff;
    --bg-hero: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --accent: #10b981;
    --card-hover: #f1f5f9;
}

/* ========================================
   GLOBAL STYLES
   ======================================== */

body { 
    background-color: var(--bg-body); 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    margin: 0; 
    color: var(--text-main); 
    overflow-x: hidden; 
    transition: background-color 0.3s ease; 
}

/* Scrollbar Styling */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; }

/* ========================================
   COMPONENT STYLES
   ======================================== */

.glass-morphism { 
    background: var(--bg-card); 
    backdrop-filter: blur(12px); 
    border: 1px solid var(--border-color); 
}

.league-header { 
    background: linear-gradient(90deg, rgba(30, 215, 96, 0.1) 0%, transparent 100%); 
}

.card-shadow { 
    box-shadow: 0 20px 40px -15px rgba(0,0,0,0.5); 
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.accent-green { color: var(--accent); }
.bg-accent { background-color: var(--accent); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Modern Horizontal Scroll for Sports */
.sport-scroll-container {
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* Live Match Animations */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(30, 215, 96, 0.2), inset 0 0 10px rgba(30, 215, 96, 0.1); }
    50% { box-shadow: 0 0 20px rgba(30, 215, 96, 0.4), inset 0 0 15px rgba(30, 215, 96, 0.2); }
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

.animate-pulse-text {
    animation: pulse-text 1s ease-in-out infinite;
}