/* All Rummy Games - Color Theme Options */

/* ===========================================
   THEME 1: Classic Blue (Current)
   =========================================== */
.theme-blue {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --accent-color: #e74c3c;
    --warning-color: #f39c12;
    --success-color: #27ae60;
    --background-color: #f8f9fa;
    --text-color: #333;
    --card-background: #ffffff;
    --header-gradient: linear-gradient(135deg, #2c3e50, #3498db);
    --hero-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* ===========================================
   THEME 2: Warm Red & Gold
   =========================================== */
.theme-red-gold {
    --primary-color: #c0392b;
    --secondary-color: #e67e22;
    --accent-color: #f1c40f;
    --warning-color: #e67e22;
    --success-color: #27ae60;
    --background-color: #fef9e7;
    --text-color: #2c3e50;
    --card-background: #ffffff;
    --header-gradient: linear-gradient(135deg, #c0392b, #e67e22);
    --hero-gradient: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
}

/* ===========================================
   THEME 3: Elegant Purple
   =========================================== */
.theme-purple {
    --primary-color: #6c5ce7;
    --secondary-color: #a29bfe;
    --accent-color: #fd79a8;
    --warning-color: #fdcb6e;
    --success-color: #00b894;
    --background-color: #f8f4ff;
    --text-color: #2d3436;
    --card-background: #ffffff;
    --header-gradient: linear-gradient(135deg, #6c5ce7, #a29bfe);
    --hero-gradient: linear-gradient(135deg, #a29bfe 0%, #fd79a8 100%);
}

/* ===========================================
   THEME 4: Forest Green
   =========================================== */
.theme-green {
    --primary-color: #27ae60;
    --secondary-color: #2ecc71;
    --accent-color: #e74c3c;
    --warning-color: #f39c12;
    --success-color: #27ae60;
    --background-color: #f0fff4;
    --text-color: #2c3e50;
    --card-background: #ffffff;
    --header-gradient: linear-gradient(135deg, #27ae60, #2ecc71);
    --hero-gradient: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

/* ===========================================
   THEME 5: Dark Gaming Theme
   =========================================== */
.theme-dark {
    --primary-color: #1a1a1a;
    --secondary-color: #ff6b35;
    --accent-color: #00d4ff;
    --warning-color: #ffd700;
    --success-color: #00ff88;
    --background-color: #0f0f0f;
    --text-color: #ffffff;
    --card-background: #1a1a1a;
    --header-gradient: linear-gradient(135deg, #1a1a1a, #2d2d2d);
    --hero-gradient: linear-gradient(135deg, #ff6b35 0%, #00d4ff 100%);
}

/* ===========================================
   THEME 6: Royal Gold
   =========================================== */
.theme-gold {
    --primary-color: #b8860b;
    --secondary-color: #daa520;
    --accent-color: #dc143c;
    --warning-color: #ff8c00;
    --success-color: #228b22;
    --background-color: #fff8dc;
    --text-color: #2c3e50;
    --card-background: #ffffff;
    --header-gradient: linear-gradient(135deg, #b8860b, #daa520);
    --hero-gradient: linear-gradient(135deg, #daa520 0%, #b8860b 100%);
}

/* ===========================================
   THEME 7: Ocean Blue
   =========================================== */
.theme-ocean {
    --primary-color: #0066cc;
    --secondary-color: #00aaff;
    --accent-color: #ff4757;
    --warning-color: #ffa502;
    --success-color: #2ed573;
    --background-color: #f0f8ff;
    --text-color: #2c3e50;
    --card-background: #ffffff;
    --header-gradient: linear-gradient(135deg, #0066cc, #00aaff);
    --hero-gradient: linear-gradient(135deg, #00aaff 0%, #0066cc 100%);
}

/* ===========================================
   THEME 8: Sunset Orange
   =========================================== */
.theme-sunset {
    --primary-color: #ff4757;
    --secondary-color: #ff6b35;
    --accent-color: #ffa502;
    --warning-color: #ff9ff3;
    --success-color: #26d0ce;
    --background-color: #fff5f5;
    --text-color: #2c3e50;
    --card-background: #ffffff;
    --header-gradient: linear-gradient(135deg, #ff4757, #ff6b35);
    --hero-gradient: linear-gradient(135deg, #ff6b35 0%, #ffa502 100%);
}

/* Apply theme variables to main styles */
.theme-blue,
.theme-red-gold,
.theme-purple,
.theme-green,
.theme-dark,
.theme-gold,
.theme-ocean,
.theme-sunset {
    /* Body and background */
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}

/* Header gradient - Light background for better text readability */
.theme-blue header,
.theme-red-gold header,
.theme-purple header,
.theme-green header,
.theme-gold header,
.theme-ocean header,
.theme-sunset header {
    background: linear-gradient(135deg, #ffffff, #f8f9fa) !important;
    border-bottom: 1px solid #e9ecef !important;
}

/* Dark theme keeps dark header */
.theme-dark header {
    background: var(--header-gradient) !important;
}

/* Dark theme navigation text */
.theme-dark .nav-menu a {
    color: #ffffff !important;
}

.theme-dark .nav-menu a:hover {
    color: #ff6b35 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-dark .nav-menu a[aria-current="page"] {
    color: #00d4ff !important;
    background-color: rgba(0, 212, 255, 0.1) !important;
}

.theme-dark .btn-outline {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.theme-dark .btn-outline:hover {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

/* Hero section gradient */
.theme-blue .hero,
.theme-red-gold .hero,
.theme-purple .hero,
.theme-green .hero,
.theme-dark .hero,
.theme-gold .hero,
.theme-ocean .hero,
.theme-sunset .hero {
    background: var(--hero-gradient) !important;
}

/* Primary buttons - Light background with dark text for better readability */
.theme-blue .btn-primary,
.theme-red-gold .btn-primary,
.theme-purple .btn-primary,
.theme-green .btn-primary,
.theme-gold .btn-primary,
.theme-ocean .btn-primary,
.theme-sunset .btn-primary {
    background: linear-gradient(135deg, #ffffff, #f8f9fa) !important;
    color: #2c3e50 !important;
    border: 2px solid var(--accent-color) !important;
    font-weight: 700 !important;
}

.theme-blue .btn-primary:hover,
.theme-red-gold .btn-primary:hover,
.theme-purple .btn-primary:hover,
.theme-green .btn-primary:hover,
.theme-gold .btn-primary:hover,
.theme-ocean .btn-primary:hover,
.theme-sunset .btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color)) !important;
    color: white !important;
}

/* Dark theme buttons */
.theme-dark .btn-primary {
    background: linear-gradient(135deg, #ffffff, #f8f9fa) !important;
    color: #1a1a1a !important;
    border: 2px solid #ff6b35 !important;
    font-weight: 700 !important;
}

.theme-dark .btn-primary:hover {
    background: linear-gradient(135deg, #ff6b35, #00d4ff) !important;
    color: #1a1a1a !important;
}

/* Cards and sections */
.theme-blue .feature-card,
.theme-red-gold .feature-card,
.theme-purple .feature-card,
.theme-green .feature-card,
.theme-dark .feature-card,
.theme-gold .feature-card,
.theme-ocean .feature-card,
.theme-sunset .feature-card,
.theme-blue .contact-card,
.theme-red-gold .contact-card,
.theme-purple .contact-card,
.theme-green .contact-card,
.theme-dark .contact-card,
.theme-gold .contact-card,
.theme-ocean .contact-card,
.theme-sunset .contact-card {
    background-color: var(--card-background) !important;
}

/* Dark theme specific adjustments */
.theme-dark .feature-card,
.theme-dark .contact-card,
.theme-dark .policy-section,
.theme-dark .terms-section,
.theme-dark .disclaimer-section,
.theme-dark .info-section {
    background-color: #2d2d2d !important;
    border: 1px solid #444;
}

.theme-dark .faq-item,
.theme-dark .step {
    background-color: #2d2d2d !important;
}

/* CTA sections */
.theme-blue .cta-section,
.theme-red-gold .cta-section,
.theme-purple .cta-section,
.theme-green .cta-section,
.theme-dark .cta-section,
.theme-gold .cta-section,
.theme-ocean .cta-section,
.theme-sunset .cta-section {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
}

/* Links and accents */
.theme-blue a,
.theme-red-gold a,
.theme-purple a,
.theme-green a,
.theme-dark a,
.theme-gold a,
.theme-ocean a,
.theme-sunset a {
    color: var(--secondary-color);
}

.theme-blue a:hover,
.theme-red-gold a:hover,
.theme-purple a:hover,
.theme-green a:hover,
.theme-dark a:hover,
.theme-gold a:hover,
.theme-ocean a:hover,
.theme-sunset a:hover {
    color: var(--accent-color);
}

/* Step numbers */
.theme-blue .step-number,
.theme-red-gold .step-number,
.theme-purple .step-number,
.theme-green .step-number,
.theme-dark .step-number,
.theme-gold .step-number,
.theme-ocean .step-number,
.theme-sunset .step-number {
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color)) !important;
}