/**
 * THEME SYSTEM
 * ============
 * 
 * CSS Custom Properties for Theme System
 * These variables automatically change when a theme class is applied to the body.
 * All components reference these variables, ensuring consistent theming throughout.
 */

/* Default/Nature Theme - Base variables */
:root {
    --primary: #4caf50; /* Main brand color */
    --primary-light: #81c784; /* Lighter variant for gradients */
    --primary-dark: #2e7d32; /* Darker variant for hovers */
    --secondary: #8bc34a; /* Secondary accent color */
    --accent: #66bb6a; /* Additional accent color */
    --bg-tint: rgba(76, 175, 80, 0.1); /* Light background tint */
    --bg-overlay: rgba(255, 255, 255, 0.95); /* Content overlay background */
    --text-primary: #2e7d32; /* Primary text color */
    --text-secondary: #4caf50; /* Secondary text color */
    --text-body: #374151; /* Body text color */
    --primary-rgb: 76, 175, 80; /* RGB values for rgba() usage */
}

/* Nature Theme - Explore Section */
body.theme-nature {
    --primary: #4caf50;
    --primary-light: #81c784;
    --primary-dark: #2e7d32;
    --secondary: #8bc34a;
    --accent: #66bb6a;
    --bg-tint: rgba(76, 175, 80, 0.1);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #2e7d32;
    --text-secondary: #4caf50;
    --text-body: #374151;
    --primary-rgb: 76, 175, 80;
}

/* Sky Theme - Understand Section */
body.theme-sky {
    --primary: #2196f3;
    --primary-light: #64b5f6;
    --primary-dark: #1565c0;
    --secondary: #03a9f4;
    --accent: #42a5f5;
    --bg-tint: rgba(33, 150, 243, 0.1);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #1565c0;
    --text-secondary: #2196f3;
    --text-body: #374151;
    --primary-rgb: 33, 150, 243;
}

/* Sunset Theme - Plan Section */
body.theme-sunset {
    --primary: #ff7043;
    --primary-light: #ff8a65;
    --primary-dark: #d84315;
    --secondary: #ff9800;
    --accent: #ffab40;
    --bg-tint: rgba(255, 112, 67, 0.1);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #d84315;
    --text-secondary: #ff7043;
    --text-body: #374151;
    --primary-rgb: 255, 112, 67;
}

/* Mystical Theme - Play Section */
body.theme-mystical {
    --primary: #7e57c2;
    --primary-light: #9e8cc2;
    --primary-dark: #512da8;
    --secondary: #9c27b0;
    --accent: #ba68c8;
    --bg-tint: rgba(126, 87, 194, 0.1);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #512da8;
    --text-secondary: #7e57c2;
    --text-body: #374151;
    --primary-rgb: 126, 87, 194;
}

/* Ocean Theme - Connect Section */
body.theme-ocean {
    --primary: #00acc1;
    --primary-light: #5ddef4;
    --primary-dark: #007c91;
    --secondary: #00bcd4;
    --accent: #26c6da;
    --bg-tint: rgba(0, 172, 193, 0.1);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #007c91;
    --text-secondary: #00acc1;
    --text-body: #374151;
    --primary-rgb: 0, 172, 193;
}

/* Direct Theme Text Colors (Legacy Support) */
.nature.text {
    color: #4caf50 !important;
}

.sky.text {
    color: #2196f3 !important;
}

.sunset.text {
    color: #ff7043 !important;
}

.mystical.text {
    color: #7e57c2 !important;
}

.ocean.text {
    color: #00acc1 !important;
}

/* ===========================================
   SCOPED THEME OVERRIDES
   Apply these classes to any container to override
   the theme for that element and its children,
   regardless of the page's body theme.

   Usage: <div class="force-theme-sky theme-bg-tint">...</div>
   =========================================== */

.force-theme-nature {
    --primary: #4caf50;
    --primary-light: #81c784;
    --primary-dark: #2e7d32;
    --secondary: #8bc34a;
    --accent: #66bb6a;
    --bg-tint: rgba(76, 175, 80, 0.1);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #2e7d32;
    --text-secondary: #4caf50;
    --text-body: #374151;
    --primary-rgb: 76, 175, 80;
}

.force-theme-sky {
    --primary: #2196f3;
    --primary-light: #64b5f6;
    --primary-dark: #1565c0;
    --secondary: #03a9f4;
    --accent: #42a5f5;
    --bg-tint: rgba(33, 150, 243, 0.1);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #1565c0;
    --text-secondary: #2196f3;
    --text-body: #374151;
    --primary-rgb: 33, 150, 243;
}

.force-theme-sunset {
    --primary: #ff7043;
    --primary-light: #ff8a65;
    --primary-dark: #d84315;
    --secondary: #ff9800;
    --accent: #ffab40;
    --bg-tint: rgba(255, 112, 67, 0.1);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #d84315;
    --text-secondary: #ff7043;
    --text-body: #374151;
    --primary-rgb: 255, 112, 67;
}

.force-theme-mystical {
    --primary: #7e57c2;
    --primary-light: #9e8cc2;
    --primary-dark: #512da8;
    --secondary: #9c27b0;
    --accent: #ba68c8;
    --bg-tint: rgba(126, 87, 194, 0.1);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #512da8;
    --text-secondary: #7e57c2;
    --text-body: #374151;
    --primary-rgb: 126, 87, 194;
}

.force-theme-ocean {
    --primary: #00acc1;
    --primary-light: #5ddef4;
    --primary-dark: #007c91;
    --secondary: #00bcd4;
    --accent: #26c6da;
    --bg-tint: rgba(0, 172, 193, 0.1);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #007c91;
    --text-secondary: #00acc1;
    --text-body: #374151;
    --primary-rgb: 0, 172, 193;
}