/* =====================================================
   छत्रपती शिवाजी महाराज चषक - Innovative Theme System
   Dark/Light Mode with Cricket Stadium Aesthetics
   ===================================================== */

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

/* Light Theme - Modern Orange & Charcoal */
:root[data-theme="light"] {
    /* Primary Colors - Charcoal Gray & Vibrant Orange */
    --primary-color: #374151;
    --primary-hover: #4b5563;
    --primary-light: rgba(55, 65, 81, 0.1);

    --secondary-color: #ea580c;
    --secondary-hover: #f97316;
    --secondary-light: rgba(234, 88, 12, 0.1);

    --accent-color: #fb923c;
    --accent-hover: #fdba74;

    /* Background Colors - Clean & Bright */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #e2e8f0;
    --bg-card: #ffffff;
    --bg-overlay: rgba(255, 255, 255, 0.95);

    /* Text Colors - High Contrast */
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-tertiary: #64748b;
    --text-inverse: #ffffff;

    /* Border & Shadow - Clean Lines */
    --border-color: #cbd5e1;
    --border-light: #e2e8f0;
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.16);
    --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.20);

    /* Status Colors - Clear & Visible */
    --success: #16a34a;
    --success-light: rgba(22, 163, 74, 0.1);
    --danger: #dc2626;
    --danger-light: rgba(220, 38, 38, 0.1);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.1);
    --info: #6b7280;
    --info-light: rgba(107, 114, 128, 0.1);

    /* Gradients - Orange & Gray Harmony */
    --gradient-primary: linear-gradient(135deg, #374151 0%, #6b7280 100%);
    --gradient-secondary: linear-gradient(135deg, #ea580c 0%, #fb923c 100%);
    --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --gradient-hero: linear-gradient(135deg, #374151 0%, #ea580c 100%);

    /* Clean Glow */
    --glow-primary: 0 0 20px rgba(55, 65, 81, 0.3);
    --glow-secondary: 0 0 20px rgba(234, 88, 12, 0.3);
}

/* Dark Theme - Deep Professional Orange */
:root[data-theme="dark"] {
    /* Primary Colors - Bright Orange & Amber */
    --primary-color: #f97316;
    --primary-hover: #fb923c;
    --primary-light: rgba(249, 115, 22, 0.15);

    --secondary-color: #fbbf24;
    --secondary-hover: #fcd34d;
    --secondary-light: rgba(251, 191, 36, 0.15);

    --accent-color: #fb923c;
    --accent-hover: #fdba74;

    /* Background Colors - Deep Dark */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: #1e293b;
    --bg-overlay: rgba(15, 23, 42, 0.95);

    /* Text Colors - Bright & Readable */
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --text-inverse: #0f172a;

    /* Border & Shadow - Dark Contrast */
    --border-color: #475569;
    --border-light: #64748b;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(59, 130, 246, 0.3);
    --shadow-xl: 0 16px 48px rgba(59, 130, 246, 0.4);

    /* Status Colors - Vibrant & Visible */
    --success: #22c55e;
    --success-light: rgba(34, 197, 94, 0.15);
    --danger: #f87171;
    --danger-light: rgba(248, 113, 113, 0.15);
    --warning: #fbbf24;
    --warning-light: rgba(251, 191, 36, 0.15);
    --info: #9ca3af;
    --info-light: rgba(156, 163, 175, 0.15);

    /* Gradients - Orange Night */
    --gradient-primary: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    --gradient-secondary: linear-gradient(135deg, #fbbf24 0%, #fcd34d 100%);
    --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --gradient-hero: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);

    /* Modern Glow */
    --glow-primary: 0 0 30px rgba(249, 115, 22, 0.5);
    --glow-secondary: 0 0 30px rgba(251, 191, 36, 0.5);
}

/* Common Theme Variables */
:root {
    --transition-fast: 0.15s ease;
    --transition: 0.3s ease;
    --transition-slow: 0.5s ease;
    --border-radius-sm: 6px;
    --border-radius: 10px;
    --border-radius-lg: 15px;
    --border-radius-xl: 20px;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
}

/* Theme Toggle Button - Floating Action Button (FAB) */
.theme-toggle-fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    background: var(--gradient-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-xl), var(--glow-primary);
    transition: var(--transition);
    z-index: 99990;
    display: none !important; /* Hidden - theme change disabled */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    animation: fab-intro 0.5s ease-out;
    visibility: hidden !important;
    opacity: 0 !important;
}

@keyframes fab-intro {
    from {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.theme-toggle-fab:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 8px 40px rgba(255, 107, 53, 0.5), var(--glow-primary);
}

.theme-toggle-fab:active {
    transform: scale(0.95);
}

.theme-toggle-fab.dark-mode {
    background: var(--gradient-secondary);
    box-shadow: var(--shadow-xl), var(--glow-secondary);
}

.theme-toggle-fab.dark-mode:hover {
    box-shadow: 0 8px 40px rgba(26, 115, 232, 0.5), var(--glow-secondary);
}

.theme-icon {
    position: absolute;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-size: 22px;
    color: var(--text-inverse);
}

.sun-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.moon-icon {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
}

.theme-toggle-fab.dark-mode .sun-icon {
    opacity: 0;
    transform: rotate(180deg) scale(0.5);
}

.theme-toggle-fab.dark-mode .moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.toggle-hint {
    position: absolute;
    bottom: 8px;
    font-size: 9px;
    font-weight: bold;
    color: var(--text-inverse);
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Pulsing animation on first load */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
    }

    50% {
        box-shadow: 0 0 40px rgba(255, 107, 53, 0.8);
    }
}

.theme-toggle-fab.first-visit {
    animation: fab-intro 0.5s ease-out, pulse-glow 2s ease-in-out 3;
}

/* Smooth theme transitions */
* {
    transition: background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

/* Disable transitions during theme change */
.theme-transitioning * {
    transition: none !important;
}

/* Enhanced Mobile Responsiveness for FAB */
@media (max-width: 768px) {
    .theme-toggle-fab {
        bottom: 20px;
        right: 20px;
        width: 60px;
        height: 60px;
    }

    .theme-icon {
        font-size: 20px;
    }

    .toggle-hint {
        font-size: 8px;
        bottom: 6px;
    }
}

/* Extra small mobile */
@media (max-width: 480px) {
    .theme-toggle-fab {
        bottom: 15px;
        right: 15px;
        width: 55px;
        height: 55px;
    }

    .theme-icon {
        font-size: 18px;
    }
}

/* Glassmorphism Effects */
.glass-effect {
    background: var(--bg-overlay);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-light);
}

/* Stadium Spotlight Effect */
.spotlight-card {
    position: relative;
    overflow: hidden;
}

.spotlight-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
}

.spotlight-card:hover::before {
    opacity: 1;
    animation: spotlight 3s ease-in-out infinite;
}

@keyframes spotlight {

    0%,
    100% {
        transform: translate(-25%, -25%);
    }

    50% {
        transform: translate(0%, 0%);
    }
}

/* Cricket Ball Bounce Animation */
@keyframes cricket-bounce {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

.bounce-on-hover:hover {
    animation: cricket-bounce 0.6s ease;
}

/* Mobile Touch Feedback */
@media (hover: none) and (pointer: coarse) {
    .theme-toggle-fab {
        /* Better touch target */
        width: 70px;
        height: 70px;
    }

    .theme-toggle-fab:active {
        transform: scale(0.9);
    }

    /* Prevent hover animation on mobile */
    .theme-toggle-fab:hover {
        transform: scale(1);
    }

    button:active,
    .btn:active {
        transform: scale(0.98);
    }
}

/* Floating button ripple effect */
.theme-toggle-fab::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}

.theme-toggle-fab:active::after {
    width: 100px;
    height: 100px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --border-color: currentColor;
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print Styles */
@media print {
    :root {
        --bg-primary: white;
        --text-primary: black;
    }

    .theme-toggle-container,
    .navbar,
    .footer {
        display: none;
    }
}