/* ==================== FOREST FORTUNE COLOR SYSTEM ==================== */
/* 
   Theme: Forest Fortune
   Tagline: Growth & Prosperity
   Description: A premium color system inspired by nature's winning spirit
   
   Primary: #1B3B2B (Deep Forest Green) - Trust, growth, stability
   Accent: #FFB74D (Warm Amber) - Energy, winning, premium feel
   Success: #81C784 (Soft Green) - Victory, positive outcomes
*/

:root {
    /* ===== PRIMARY COLORS - Deep Forest ===== */
    --color-primary: #1B3B2B;
    --color-primary-light: #2D5A42;
    --color-primary-dark: #0F2618;
    --color-primary-bg: rgba(27, 59, 43, 0.1);
    --color-primary-bg-strong: rgba(27, 59, 43, 0.2);
    
    /* ===== ACCENT COLORS - Warm Amber ===== */
    --color-accent: #FFB74D;
    --color-accent-light: #FFD699;
    --color-accent-dark: #E5A040;
    --color-accent-bg: rgba(255, 183, 77, 0.1);
    
    /* ===== SUCCESS COLORS - Victory Green ===== */
    --color-success: #81C784;
    --color-success-light: #A5D6A7;
    --color-success-dark: #66BB6A;
    --color-success-bg: rgba(129, 199, 132, 0.1);
    
    /* ===== SEMANTIC COLORS ===== */
    --color-error: #EF5350;
    --color-error-light: #F87171;
    --color-error-dark: #DC2626;
    --color-error-bg: rgba(239, 68, 68, 0.1);
    
    --color-warning: #FFB74D;
    --color-warning-light: #FFD699;
    --color-warning-dark: #E5A040;
    --color-warning-bg: rgba(255, 183, 77, 0.1);
    
    --color-info: #64B5F6;
    --color-info-light: #90CAF9;
    --color-info-dark: #42A5F5;
    --color-info-bg: rgba(100, 181, 246, 0.1);
    
    /* ===== NEUTRAL COLORS ===== */
    --color-white: #FFFFFF;
    --color-gray-50: #F8FAFC;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1E293B;
    --color-gray-900: #0F172A;
    --color-black: #000000;
    
    /* ===== BACKGROUND COLORS ===== */
    --bg-primary: linear-gradient(135deg, #0F2618 0%, #1B3B2B 100%);
    --bg-card: rgba(255, 255, 255, 0.05);
    --bg-card-solid: #1B3B2B;
    --bg-modal: rgba(0, 0, 0, 0.6);
    --bg-footer: linear-gradient(135deg, #0F2618, #1B3B2B);
    
    /* ===== GRADIENT PRESETS ===== */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    --gradient-success: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    --gradient-error: linear-gradient(135deg, var(--color-error), var(--color-error-dark));
    --gradient-hero: linear-gradient(135deg, #1B3B2B, #2D5A42);
    --gradient-gold: linear-gradient(135deg, #FFB74D, #E5A040);
    
    /* ===== SHADOW PRESETS ===== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-primary: 0 4px 15px rgba(27, 59, 43, 0.4);
    --shadow-accent: 0 4px 15px rgba(255, 183, 77, 0.3);
    --shadow-success: 0 4px 12px rgba(129, 199, 132, 0.3);
}

/* ===== TEXT COLORS ===== */
.text-primary { color: var(--color-primary); }
.text-primary-light { color: var(--color-primary-light); }
.text-primary-dark { color: var(--color-primary-dark); }
.text-accent { color: var(--color-accent); }
.text-accent-light { color: var(--color-accent-light); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }
.text-white { color: var(--color-white); }
.text-gray-50 { color: var(--color-gray-50); }
.text-gray-100 { color: var(--color-gray-100); }
.text-gray-200 { color: var(--color-gray-200); }
.text-gray-300 { color: var(--color-gray-300); }
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-700 { color: var(--color-gray-700); }
.text-gray-800 { color: var(--color-gray-800); }
.text-gray-900 { color: var(--color-gray-900); }

/* ===== BACKGROUND COLORS ===== */
.bg-primary { background: var(--color-primary); }
.bg-primary-light { background: var(--color-primary-light); }
.bg-primary-dark { background: var(--color-primary-dark); }
.bg-primary-bg { background: var(--color-primary-bg); }
.bg-accent { background: var(--color-accent); }
.bg-accent-light { background: var(--color-accent-light); }
.bg-accent-bg { background: var(--color-accent-bg); }
.bg-success { background: var(--color-success); }
.bg-success-bg { background: var(--color-success-bg); }
.bg-error { background: var(--color-error); }
.bg-error-bg { background: var(--color-error-bg); }
.bg-warning { background: var(--color-warning); }
.bg-info { background: var(--color-info); }
.bg-white { background: var(--color-white); }
.bg-gray-50 { background: var(--color-gray-50); }
.bg-gray-100 { background: var(--color-gray-100); }
.bg-gray-200 { background: var(--color-gray-200); }
.bg-gray-300 { background: var(--color-gray-300); }
.bg-gray-400 { background: var(--color-gray-400); }
.bg-gray-500 { background: var(--color-gray-500); }
.bg-gray-600 { background: var(--color-gray-600); }
.bg-gray-700 { background: var(--color-gray-700); }
.bg-gray-800 { background: var(--color-gray-800); }
.bg-gray-900 { background: var(--color-gray-900); }
.bg-black { background: var(--color-black); }
.bg-transparent { background: transparent; }

/* ===== GRADIENT BACKGROUNDS ===== */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-accent { background: var(--gradient-accent); }
.bg-gradient-success { background: var(--gradient-success); }
.bg-gradient-error { background: var(--gradient-error); }
.bg-gradient-hero { background: var(--gradient-hero); }
.bg-gradient-gold { background: var(--gradient-gold); }
.bg-gradient-page { background: var(--bg-primary); }

/* ===== BORDER COLORS ===== */
.border-primary { border-color: var(--color-primary); }
.border-primary-light { border-color: var(--color-primary-light); }
.border-accent { border-color: var(--color-accent); }
.border-success { border-color: var(--color-success); }
.border-error { border-color: var(--color-error); }
.border-warning { border-color: var(--color-warning); }
.border-info { border-color: var(--color-info); }
.border-gray-200 { border-color: var(--color-gray-200); }
.border-gray-300 { border-color: var(--color-gray-300); }
.border-white { border-color: var(--color-white); }

/* ===== SHADOW CLASSES ===== */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-primary { box-shadow: var(--shadow-primary); }
.shadow-accent { box-shadow: var(--shadow-accent); }
.shadow-success { box-shadow: var(--shadow-success); }
.shadow-none { box-shadow: none; }

/* ===== BUTTON STYLES ===== */
.btn-primary {
    background: var(--gradient-primary);
    color: var(--color-white);
    border: none;
    padding: 12px 28px;
    border-radius: 60px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

.btn-accent {
    background: var(--gradient-accent);
    color: var(--color-primary-dark);
    border: none;
    padding: 12px 28px;
    border-radius: 60px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
}

.btn-secondary {
    background: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-primary-light);
    padding: 12px 28px;
    border-radius: 60px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-secondary:hover {
    background: var(--color-primary-light);
    color: var(--color-white);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    padding: 12px 28px;
    border-radius: 60px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-outline:hover {
    background: var(--color-accent);
    color: var(--color-primary-dark);
    transform: translateY(-2px);
}

.btn-success {
    background: var(--gradient-success);
    color: var(--color-primary-dark);
    border: none;
    padding: 12px 28px;
    border-radius: 60px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-success);
}

.btn-ghost {
    background: transparent;
    color: var(--color-gray-400);
    border: none;
    padding: 12px 28px;
    border-radius: 60px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-ghost:hover {
    background: var(--color-primary-bg);
    color: var(--color-accent);
}

/* ===== BADGE STYLES ===== */
.badge-primary {
    background: var(--gradient-primary);
    color: var(--color-white);
    padding: 4px 12px;
    border-radius: 60px;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-block;
}
.badge-accent {
    background: var(--gradient-accent);
    color: var(--color-primary-dark);
    padding: 4px 12px;
    border-radius: 60px;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-block;
}
.badge-success {
    background: var(--color-success-bg);
    color: var(--color-success);
    padding: 4px 12px;
    border-radius: 60px;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-block;
}
.badge-error {
    background: var(--color-error-bg);
    color: var(--color-error);
    padding: 4px 12px;
    border-radius: 60px;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-block;
}

/* ===== CARD STYLES ===== */
.card {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255, 183, 77, 0.3);
}

.card-solid {
    background: var(--bg-card-solid);
    border-radius: 24px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

/* ===== MATCH CARD (Football Specific) ===== */
.match-card {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    border-left: 4px solid var(--color-accent);
    transition: all 0.3s ease;
    margin-bottom: 16px;
}
.match-card:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.08);
}

.match-teams {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}
.match-team {
    display: flex;
    align-items: center;
    gap: 12px;
}
.match-vs {
    font-weight: 800;
    color: var(--color-accent);
}
.match-prediction {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
    gap: 12px;
}
.prediction-badge {
    background: var(--color-accent-bg);
    color: var(--color-accent);
    padding: 6px 14px;
    border-radius: 40px;
    font-size: 0.75rem;
    font-weight: 700;
}
.win-rate {
    background: var(--gradient-success);
    color: var(--color-primary-dark);
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ===== INPUT STYLES ===== */
.input-primary {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 16px;
    color: var(--color-white);
    font-size: 0.9rem;
    transition: all 0.2s ease;
    width: 100%;
}
.input-primary:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-bg);
}
.input-primary::placeholder {
    color: var(--color-gray-500);
}

/* ===== LINK STYLES ===== */
.link-primary {
    color: var(--color-accent);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}
.link-primary:hover {
    color: var(--color-accent-light);
    text-decoration: underline;
}

/* ===== DIVIDER ===== */
.divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 24px 0;
}
.divider-accent {
    height: 2px;
    background: var(--gradient-accent);
    margin: 24px 0;
}

/* ===== ALERT STYLES ===== */
.alert-success {
    background: var(--color-success-bg);
    border-left: 4px solid var(--color-success);
    padding: 16px;
    border-radius: 12px;
    color: var(--color-success-light);
    margin-bottom: 12px;
}
.alert-error {
    background: var(--color-error-bg);
    border-left: 4px solid var(--color-error);
    padding: 16px;
    border-radius: 12px;
    color: var(--color-error-light);
    margin-bottom: 12px;
}
.alert-warning {
    background: var(--color-warning-bg);
    border-left: 4px solid var(--color-warning);
    padding: 16px;
    border-radius: 12px;
    color: var(--color-warning-light);
    margin-bottom: 12px;
}
.alert-info {
    background: var(--color-info-bg);
    border-left: 4px solid var(--color-info);
    padding: 16px;
    border-radius: 12px;
    color: var(--color-info-light);
    margin-bottom: 12px;
}

/* ===== LOADING SPINNER ===== */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== HOVER EFFECTS ===== */
.hover-lift {
    transition: all 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
}
.hover-glow:hover {
    box-shadow: var(--shadow-accent);
}
.hover-scale:hover {
    transform: scale(1.02);
}

/* ===== RESPONSIVE UTILITIES ===== */
@media (max-width: 768px) {
    .card { padding: 16px; }
    .match-card { padding: 16px; }
    .btn-primary, .btn-accent, .btn-secondary, .btn-outline { padding: 10px 20px; font-size: 0.8rem; }
    .badge-primary, .badge-accent, .badge-success { padding: 3px 10px; font-size: 0.65rem; }
}

/* ===== SCROLLBAR STYLES ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-primary-dark);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-light);
}