/**
 * TSTP Text Analyzer - Theme Collection
 * File: src/css/themes.css
 * 
 * This file contains various theme options for the TSTP Text Analyzer.
 * Each theme is carefully designed with proper color contrast and accessibility in mind.
 * 
 * Called by: src/js/main.js - setTheme() and loadSavedTheme() functions
 * File: src/css/themes.css, Line: 1
 */

/* Default Light Theme */
:root {
    /* Light Theme Variables */
    --light-bg-primary: #ffffff;
    --light-bg-secondary: #f8f9fa;
    --light-bg-tertiary: #e9ecef;
    --light-bg-elevated: #dee2e6;
    
    --light-accent-primary: #0d6efd;
    --light-accent-secondary: #6c757d;
    --light-accent-danger: #dc3545;
    
    --light-text-primary: #212529;
    --light-text-secondary: #495057;
    --light-text-muted: #6c757d;
    
    --light-border-color: #dee2e6;
    --light-shadow-color: rgba(0, 0, 0, 0.1);
    --light-highlight-color: rgba(255, 255, 255, 0.5);
    
    /* 3D effect distances - shared across themes */
    --shadow-small: 0 2px 4px;
    --shadow-medium: 0 4px 8px;
    --shadow-large: 0 8px 16px;
    
    /* Default theme uses light theme variables */
    --bg-primary: var(--light-bg-primary);
    --bg-secondary: var(--light-bg-secondary);
    --bg-tertiary: var(--light-bg-tertiary);
    --bg-elevated: var(--light-bg-elevated);
    
    --accent-primary: var(--light-accent-primary);
    --accent-secondary: var(--light-accent-secondary);
    --accent-danger: var(--light-accent-danger);
    
    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --text-muted: var(--light-text-muted);
    
    --border-color: var(--light-border-color);
    --shadow-color: var(--light-shadow-color);
    --highlight-color: var(--light-highlight-color);
    
    /* RGB values for opacity adjustments */
    --accent-primary-rgb: 13, 110, 253;
    --accent-secondary-rgb: 108, 117, 125;
    --accent-danger-rgb: 220, 53, 69;
    
    /* Card specific variables */
    --card-bg: var(--bg-secondary);
    --card-border: var(--border-color);
    --card-body-bg: var(--bg-primary);
    --card-body-color: var(--text-primary);
    
    /* Form element specific variables */
    --input-bg: var(--bg-primary);
    --input-border: var(--border-color);
    --input-color: var(--text-primary);
    --input-focus-border: var(--accent-primary);
    --input-focus-shadow: rgba(var(--accent-primary-rgb), 0.25);
    
    /* Button specific variables */
    --btn-primary-bg: var(--accent-primary);
    --btn-primary-border: var(--accent-primary);
    --btn-primary-color: #ffffff;
    --btn-secondary-bg: var(--accent-secondary);
    --btn-secondary-border: var(--accent-secondary);
    --btn-secondary-color: #ffffff;
    --btn-danger-bg: var(--accent-danger);
    --btn-danger-border: var(--accent-danger);
    --btn-danger-color: #ffffff;
}

/* Modern Dark Theme */
.theme-modern-dark {
    /* Dark Theme Variables */
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #252525;
    --bg-elevated: #2a2a2a;
    
    --accent-primary: #bb86fc;
    --accent-secondary: #03dac6;
    --accent-danger: #cf6679;
    
    --text-primary: #e2e2e2;
    --text-secondary: #b0b0b0;
    --text-muted: #747474;
    
    --border-color: #333333;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --highlight-color: rgba(255, 255, 255, 0.05);
    
    /* RGB values for opacity adjustments */
    --accent-primary-rgb: 187, 134, 252;
    --accent-secondary-rgb: 3, 218, 198;
    --accent-danger-rgb: 207, 102, 121;
    
    /* Card specific variables */
    --card-bg: #2d3748;
    --card-border: #4a5568;
    --card-body-bg: #1e1e1e;
    --card-body-color: #cbd5e0;
    
    /* Form element specific variables */
    --input-bg: #2d3748;
    --input-border: #4a5568;
    --input-color: #e2e2e2;
    --input-focus-border: #bb86fc;
    --input-focus-shadow: rgba(187, 134, 252, 0.25);
    
    /* Button specific variables */
    --btn-primary-bg: #bb86fc;
    --btn-primary-border: #bb86fc;
    --btn-primary-color: #121212;
    --btn-secondary-bg: #03dac6;
    --btn-secondary-border: #03dac6;
    --btn-secondary-color: #121212;
    --btn-danger-bg: #cf6679;
    --btn-danger-border: #cf6679;
    --btn-danger-color: #121212;
}

/* Nature Green Theme */
.theme-nature-green {
    /* Nature Green Theme Variables */
    --bg-primary: #f1f8e9;
    --bg-secondary: #dcedc8;
    --bg-tertiary: #c5e1a5;
    --bg-elevated: #aed581;
    
    --accent-primary: #558b2f;
    --accent-secondary: #33691e;
    --accent-danger: #c62828;
    
    --text-primary: #1b5e20;
    --text-secondary: #2e7d32;
    --text-muted: #388e3c;
    
    --border-color: #a5d6a7;
    --shadow-color: rgba(76, 175, 80, 0.2);
    --highlight-color: rgba(139, 195, 74, 0.1);
    
    /* RGB values for opacity adjustments */
    --accent-primary-rgb: 85, 139, 47;
    --accent-secondary-rgb: 51, 105, 30;
    --accent-danger-rgb: 198, 40, 40;
    
    /* Card specific variables */
    --card-bg: #dcedc8;
    --card-border: #aed581;
    --card-body-bg: #f1f8e9;
    --card-body-color: #1b5e20;
    
    /* Form element specific variables */
    --input-bg: #f1f8e9;
    --input-border: #a5d6a7;
    --input-color: #1b5e20;
    --input-focus-border: #558b2f;
    --input-focus-shadow: rgba(85, 139, 47, 0.25);
    
    /* Button specific variables */
    --btn-primary-bg: #558b2f;
    --btn-primary-border: #558b2f;
    --btn-primary-color: #ffffff;
    --btn-secondary-bg: #33691e;
    --btn-secondary-border: #33691e;
    --btn-secondary-color: #ffffff;
    --btn-danger-bg: #c62828;
    --btn-danger-border: #c62828;
    --btn-danger-color: #ffffff;
}

/* Royal Purple Theme */
.theme-royal-purple {
    /* Royal Purple Theme Variables */
    --bg-primary: #f3e5f5;
    --bg-secondary: #e1bee7;
    --bg-tertiary: #ce93d8;
    --bg-elevated: #ba68c8;
    
    --accent-primary: #7b1fa2;
    --accent-secondary: #4a148c;
    --accent-danger: #c62828;
    
    --text-primary: #4a148c;
    --text-secondary: #6a1b9a;
    --text-muted: #7b1fa2;
    
    --border-color: #ce93d8;
    --shadow-color: rgba(156, 39, 176, 0.2);
    --highlight-color: rgba(186, 104, 200, 0.1);
    
    /* RGB values for opacity adjustments */
    --accent-primary-rgb: 123, 31, 162;
    --accent-secondary-rgb: 74, 20, 140;
    --accent-danger-rgb: 198, 40, 40;
    
    /* Card specific variables */
    --card-bg: #e1bee7;
    --card-border: #ce93d8;
    --card-body-bg: #f3e5f5;
    --card-body-color: #4a148c;
    
    /* Form element specific variables */
    --input-bg: #f3e5f5;
    --input-border: #ce93d8;
    --input-color: #4a148c;
    --input-focus-border: #7b1fa2;
    --input-focus-shadow: rgba(123, 31, 162, 0.25);
    
    /* Button specific variables */
    --btn-primary-bg: #7b1fa2;
    --btn-primary-border: #7b1fa2;
    --btn-primary-color: #ffffff;
    --btn-secondary-bg: #4a148c;
    --btn-secondary-border: #4a148c;
    --btn-secondary-color: #ffffff;
    --btn-danger-bg: #c62828;
    --btn-danger-border: #c62828;
    --btn-danger-color: #ffffff;
}

/* Ocean Blue Theme */
.theme-ocean-blue {
    /* Ocean Blue Theme Variables */
    --bg-primary: #e1f5fe;
    --bg-secondary: #b3e5fc;
    --bg-tertiary: #81d4fa;
    --bg-elevated: #4fc3f7;
    
    --accent-primary: #0277bd;
    --accent-secondary: #01579b;
    --accent-danger: #c62828;
    
    --text-primary: #01579b;
    --text-secondary: #0277bd;
    --text-muted: #0288d1;
    
    --border-color: #81d4fa;
    --shadow-color: rgba(3, 169, 244, 0.2);
    --highlight-color: rgba(79, 195, 247, 0.1);
    
    /* RGB values for opacity adjustments */
    --accent-primary-rgb: 2, 119, 189;
    --accent-secondary-rgb: 1, 87, 155;
    --accent-danger-rgb: 198, 40, 40;
    
    /* Card specific variables */
    --card-bg: #b3e5fc;
    --card-border: #81d4fa;
    --card-body-bg: #e1f5fe;
    --card-body-color: #01579b;
    
    /* Form element specific variables */
    --input-bg: #e1f5fe;
    --input-border: #81d4fa;
    --input-color: #01579b;
    --input-focus-border: #0277bd;
    --input-focus-shadow: rgba(2, 119, 189, 0.25);
    
    /* Button specific variables */
    --btn-primary-bg: #0277bd;
    --btn-primary-border: #0277bd;
    --btn-primary-color: #ffffff;
    --btn-secondary-bg: #01579b;
    --btn-secondary-border: #01579b;
    --btn-secondary-color: #ffffff;
    --btn-danger-bg: #c62828;
    --btn-danger-border: #c62828;
    --btn-danger-color: #ffffff;
}

/* Midnight Blue Theme */
.theme-midnight-blue {
    --bg-primary: #0a1929;
    --bg-secondary: #132f4c;
    --bg-tertiary: #173a5e;
    --bg-elevated: #1e4976;
    
    --accent-primary: #66b2ff;
    --accent-secondary: #30a0e0;
    --accent-danger: #ff4569;
    
    --text-primary: #ffffff;
    --text-secondary: #b2bac2;
    --text-muted: #6b7a90;
    
    --border-color: #1e4976;
    --shadow-color: rgba(0, 30, 60, 0.5);
    --highlight-color: rgba(102, 178, 255, 0.1);
    
    --accent-primary-rgb: 102, 178, 255;
    --accent-secondary-rgb: 48, 160, 224;
    --accent-danger-rgb: 255, 69, 105;
    
    /* Card specific variables */
    --card-bg: #132f4c;
    --card-border: #1e4976;
    --card-body-bg: #0a1929;
    --card-body-color: #ffffff;
    
    /* Form element specific variables */
    --input-bg: #132f4c;
    --input-border: #1e4976;
    --input-color: #ffffff;
    --input-focus-border: #66b2ff;
    --input-focus-shadow: rgba(102, 178, 255, 0.25);
    
    /* Button specific variables */
    --btn-primary-bg: #66b2ff;
    --btn-primary-border: #66b2ff;
    --btn-primary-color: #0a1929;
    --btn-secondary-bg: #30a0e0;
    --btn-secondary-border: #30a0e0;
    --btn-secondary-color: #0a1929;
    --btn-danger-bg: #ff4569;
    --btn-danger-border: #ff4569;
    --btn-danger-color: #0a1929;
}

/* Desert Sand Theme */
.theme-desert-sand {
    --bg-primary: #f8f0e3;
    --bg-secondary: #eadfc7;
    --bg-tertiary: #dbc8a4;
    --bg-elevated: #c9b18f;
    
    --accent-primary: #8d6e63;
    --accent-secondary: #5d4037;
    --accent-danger: #b71c1c;
    
    --text-primary: #3e2723;
    --text-secondary: #4e342e;
    --text-muted: #6d4c41;
    
    --border-color: #d7ccc8;
    --shadow-color: rgba(121, 85, 72, 0.2);
    --highlight-color: rgba(188, 170, 164, 0.2);
    
    --accent-primary-rgb: 141, 110, 99;
    --accent-secondary-rgb: 93, 64, 55;
    --accent-danger-rgb: 183, 28, 28;
    
    /* Card specific variables */
    --card-bg: #eadfc7;
    --card-border: #d7ccc8;
    --card-body-bg: #f8f0e3;
    --card-body-color: #3e2723;
    
    /* Form element specific variables */
    --input-bg: #f8f0e3;
    --input-border: #d7ccc8;
    --input-color: #3e2723;
    --input-focus-border: #8d6e63;
    --input-focus-shadow: rgba(141, 110, 99, 0.25);
    
    /* Button specific variables */
    --btn-primary-bg: #8d6e63;
    --btn-primary-border: #8d6e63;
    --btn-primary-color: #ffffff;
    --btn-secondary-bg: #5d4037;
    --btn-secondary-border: #5d4037;
    --btn-secondary-color: #ffffff;
    --btn-danger-bg: #b71c1c;
    --btn-danger-border: #b71c1c;
    --btn-danger-color: #ffffff;
}

/* Neon Cyberpunk Theme */
.theme-neon-cyberpunk {
    --bg-primary: #0f0f12;
    --bg-secondary: #16161d;
    --bg-tertiary: #1c1c24;
    --bg-elevated: #24242e;
    
    --accent-primary: #00f2ff;
    --accent-secondary: #fc00ff;
    --accent-danger: #ff003c;
    
    --text-primary: #ffffff;
    --text-secondary: #c0c0c0;
    --text-muted: #808080;
    
    --border-color: #2a2a38;
    --shadow-color: rgba(0, 242, 255, 0.3);
    --highlight-color: rgba(252, 0, 255, 0.1);
    
    --accent-primary-rgb: 0, 242, 255;
    --accent-secondary-rgb: 252, 0, 255;
    --accent-danger-rgb: 255, 0, 60;
    
    /* Card specific variables */
    --card-bg: #16161d;
    --card-border: #2a2a38;
    --card-body-bg: #0f0f12;
    --card-body-color: #ffffff;
    
    /* Form element specific variables */
    --input-bg: #16161d;
    --input-border: #2a2a38;
    --input-color: #ffffff;
    --input-focus-border: #00f2ff;
    --input-focus-shadow: rgba(0, 242, 255, 0.25);
    
    /* Button specific variables */
    --btn-primary-bg: #00f2ff;
    --btn-primary-border: #00f2ff;
    --btn-primary-color: #0f0f12;
    --btn-secondary-bg: #fc00ff;
    --btn-secondary-border: #fc00ff;
    --btn-secondary-color: #0f0f12;
    --btn-danger-bg: #ff003c;
    --btn-danger-border: #ff003c;
    --btn-danger-color: #0f0f12;
}

/* Autumn Harvest Theme */
.theme-autumn-harvest {
    --bg-primary: #f9f5f0;
    --bg-secondary: #f1e8d8;
    --bg-tertiary: #e8d6b9;
    --bg-elevated: #d9bc8b;
    
    --accent-primary: #b35a1f;
    --accent-secondary: #8c4a00;
    --accent-danger: #b33939;
    
    --text-primary: #4e342e;
    --text-secondary: #6d4c41;
    --text-muted: #8d6e63;
    
    --border-color: #d7ccc8;
    --shadow-color: rgba(193, 120, 23, 0.2);
    --highlight-color: rgba(217, 188, 139, 0.2);
    
    --accent-primary-rgb: 179, 90, 31;
    --accent-secondary-rgb: 140, 74, 0;
    --accent-danger-rgb: 179, 57, 57;
    
    /* Card specific variables */
    --card-bg: #f1e8d8;
    --card-border: #e8d6b9;
    --card-body-bg: #f9f5f0;
    --card-body-color: #4e342e;
    
    /* Form element specific variables */
    --input-bg: #f9f5f0;
    --input-border: #e8d6b9;
    --input-color: #4e342e;
    --input-focus-border: #b35a1f;
    --input-focus-shadow: rgba(179, 90, 31, 0.25);
    
    /* Button specific variables */
    --btn-primary-bg: #b35a1f;
    --btn-primary-border: #b35a1f;
    --btn-primary-color: #ffffff;
    --btn-secondary-bg: #8c4a00;
    --btn-secondary-border: #8c4a00;
    --btn-secondary-color: #ffffff;
    --btn-danger-bg: #b33939;
    --btn-danger-border: #b33939;
    --btn-danger-color: #ffffff;
}

/* Arctic Frost Theme */
.theme-arctic-frost {
    --bg-primary: #ecf2f9;
    --bg-secondary: #dbe7f3;
    --bg-tertiary: #c9d9eb;
    --bg-elevated: #b1c9e0;
    
    --accent-primary: #3a6ea5;
    --accent-secondary: #2c5985;
    --accent-danger: #a83b3b;
    
    --text-primary: #2c3e50;
    --text-secondary: #34495e;
    --text-muted: #7f8c8d;
    
    --border-color: #b1c9e0;
    --shadow-color: rgba(77, 126, 168, 0.2);
    --highlight-color: rgba(177, 201, 224, 0.3);
    
    --accent-primary-rgb: 58, 110, 165;
    --accent-secondary-rgb: 44, 89, 133;
    --accent-danger-rgb: 168, 59, 59;
    
    /* Card specific variables */
    --card-bg: #dbe7f3;
    --card-border: #c9d9eb;
    --card-body-bg: #ecf2f9;
    --card-body-color: #2c3e50;
    
    /* Form element specific variables */
    --input-bg: #ecf2f9;
    --input-border: #c9d9eb;
    --input-color: #2c3e50;
    --input-focus-border: #3a6ea5;
    --input-focus-shadow: rgba(58, 110, 165, 0.25);
    
    /* Button specific variables */
    --btn-primary-bg: #3a6ea5;
    --btn-primary-border: #3a6ea5;
    --btn-primary-color: #ffffff;
    --btn-secondary-bg: #2c5985;
    --btn-secondary-border: #2c5985;
    --btn-secondary-color: #ffffff;
    --btn-danger-bg: #a83b3b;
    --btn-danger-border: #a83b3b;
    --btn-danger-color: #ffffff;
}

/* Tropical Paradise Theme */
.theme-tropical-paradise {
    --bg-primary: #e8f5e9;
    --bg-secondary: #c8e6c9;
    --bg-tertiary: #a5d6a7;
    --bg-elevated: #81c784;
    
    --accent-primary: #00796b;
    --accent-secondary: #00695c;
    --accent-danger: #d32f2f;
    
    --text-primary: #1b5e20;
    --text-secondary: #2e7d32;
    --text-muted: #388e3c;
    
    --border-color: #a5d6a7;
    --shadow-color: rgba(0, 137, 123, 0.2);
    --highlight-color: rgba(129, 199, 132, 0.2);
    
    --accent-primary-rgb: 0, 121, 107;
    --accent-secondary-rgb: 0, 105, 92;
    --accent-danger-rgb: 211, 47, 47;
    
    /* Card specific variables */
    --card-bg: #c8e6c9;
    --card-border: #a5d6a7;
    --card-body-bg: #e8f5e9;
    --card-body-color: #1b5e20;
    
    /* Form element specific variables */
    --input-bg: #e8f5e9;
    --input-border: #a5d6a7;
    --input-color: #1b5e20;
    --input-focus-border: #00796b;
    --input-focus-shadow: rgba(0, 121, 107, 0.25);
    
    /* Button specific variables */
    --btn-primary-bg: #00796b;
    --btn-primary-border: #00796b;
    --btn-primary-color: #ffffff;
    --btn-secondary-bg: #00695c;
    --btn-secondary-border: #00695c;
    --btn-secondary-color: #ffffff;
    --btn-danger-bg: #d32f2f;
    --btn-danger-border: #d32f2f;
    --btn-danger-color: #ffffff;
}

/* Cherry Blossom Theme */
.theme-cherry-blossom {
    --bg-primary: #fce4ec;
    --bg-secondary: #f8bbd0;
    --bg-tertiary: #f48fb1;
    --bg-elevated: #f06292;
    
    --accent-primary: #c2185b;
    --accent-secondary: #ad1457;
    --accent-danger: #b71c1c;
    
    --text-primary: #880e4f;
    --text-secondary: #ad1457;
    --text-muted: #c2185b;
    
    --border-color: #f48fb1;
    --shadow-color: rgba(216, 27, 96, 0.2);
    --highlight-color: rgba(240, 98, 146, 0.2);
    
    --accent-primary-rgb: 194, 24, 91;
    --accent-secondary-rgb: 173, 20, 87;
    --accent-danger-rgb: 183, 28, 28;
    
    /* Card specific variables */
    --card-bg: #f8bbd0;
    --card-border: #f48fb1;
    --card-body-bg: #fce4ec;
    --card-body-color: #880e4f;
    
    /* Form element specific variables */
    --input-bg: #fce4ec;
    --input-border: #f48fb1;
    --input-color: #880e4f;
    --input-focus-border: #c2185b;
    --input-focus-shadow: rgba(194, 24, 91, 0.25);
    
    /* Button specific variables */
    --btn-primary-bg: #c2185b;
    --btn-primary-border: #c2185b;
    --btn-primary-color: #ffffff;
    --btn-secondary-bg: #ad1457;
    --btn-secondary-border: #ad1457;
    --btn-secondary-color: #ffffff;
    --btn-danger-bg: #b71c1c;
    --btn-danger-border: #b71c1c;
    --btn-danger-color: #ffffff;
}

/* Coffee Theme */
.theme-coffee {
    --bg-primary: #efebe9;
    --bg-secondary: #d7ccc8;
    --bg-tertiary: #bcaaa4;
    --bg-elevated: #a1887f;
    
    --accent-primary: #6d4c41;
    --accent-secondary: #5d4037;
    --accent-danger: #b71c1c;
    
    --text-primary: #3e2723;
    --text-secondary: #4e342e;
    --text-muted: #5d4037;
    
    --border-color: #bcaaa4;
    --shadow-color: rgba(121, 85, 72, 0.2);
    --highlight-color: rgba(161, 136, 127, 0.2);
    
    --accent-primary-rgb: 109, 76, 65;
    --accent-secondary-rgb: 93, 64, 55;
    --accent-danger-rgb: 183, 28, 28;
    
    /* Card specific variables */
    --card-bg: #d7ccc8;
    --card-border: #bcaaa4;
    --card-body-bg: #efebe9;
    --card-body-color: #3e2723;
    
    /* Form element specific variables */
    --input-bg: #efebe9;
    --input-border: #bcaaa4;
    --input-color: #3e2723;
    --input-focus-border: #6d4c41;
    --input-focus-shadow: rgba(109, 76, 65, 0.25);
    
    /* Button specific variables */
    --btn-primary-bg: #6d4c41;
    --btn-primary-border: #6d4c41;
    --btn-primary-color: #ffffff;
    --btn-secondary-bg: #5d4037;
    --btn-secondary-border: #5d4037;
    --btn-secondary-color: #ffffff;
    --btn-danger-bg: #b71c1c;
    --btn-danger-border: #b71c1c;
    --btn-danger-color: #ffffff;
}

/* Sunset Orange Theme */
.theme-sunset-orange {
    --bg-primary: #fff3e0;
    --bg-secondary: #ffe0b2;
    --bg-tertiary: #ffcc80;
    --bg-elevated: #ffb74d;
    
    --accent-primary: #e65100;
    --accent-secondary: #bf360c;
    --accent-danger: #b71c1c;
    
    --text-primary: #bf360c;
    --text-secondary: #d84315;
    --text-muted: #e64a19;
    
    --border-color: #ffcc80;
    --shadow-color: rgba(245, 124, 0, 0.2);
    --highlight-color: rgba(255, 183, 77, 0.2);
    
    --accent-primary-rgb: 245, 124, 0;
    --accent-secondary-rgb: 230, 81, 0;
    --accent-danger-rgb: 213, 0, 0;
}

/* Lavender Dreams Theme */
.theme-lavender-dreams {
    --bg-primary: #f3e5f5;
    --bg-secondary: #e1bee7;
    --bg-tertiary: #ce93d8;
    --bg-elevated: #ba68c8;
    
    --accent-primary: #8e24aa;
    --accent-secondary: #6a1b9a;
    --accent-danger: #c62828;
    
    --text-primary: #4a148c;
    --text-secondary: #6a1b9a;
    --text-muted: #7b1fa2;
    
    --border-color: #ce93d8;
    --shadow-color: rgba(142, 36, 170, 0.2);
    --highlight-color: rgba(186, 104, 200, 0.2);
    
    --accent-primary-rgb: 142, 36, 170;
    --accent-secondary-rgb: 106, 27, 154;
    --accent-danger-rgb: 198, 40, 40;
}

/* Mint Fresh Theme */
.theme-mint-fresh {
    --bg-primary: #e0f2f1;
    --bg-secondary: #b2dfdb;
    --bg-tertiary: #80cbc4;
    --bg-elevated: #4db6ac;
    
    --accent-primary: #00897b;
    --accent-secondary: #00695c;
    --accent-danger: #d32f2f;
    
    --text-primary: #004d40;
    --text-secondary: #00695c;
    --text-muted: #00796b;
    
    --border-color: #80cbc4;
    --shadow-color: rgba(0, 137, 123, 0.2);
    --highlight-color: rgba(77, 182, 172, 0.2);
    
    --accent-primary-rgb: 0, 137, 123;
    --accent-secondary-rgb: 0, 105, 92;
    --accent-danger-rgb: 211, 47, 47;
}

/* Slate Gray Theme */
.theme-slate-gray {
    --bg-primary: #eceff1;
    --bg-secondary: #cfd8dc;
    --bg-tertiary: #b0bec5;
    --bg-elevated: #90a4ae;
    
    --accent-primary: #546e7a;
    --accent-secondary: #37474f;
    --accent-danger: #c62828;
    
    --text-primary: #263238;
    --text-secondary: #37474f;
    --text-muted: #455a64;
    
    --border-color: #b0bec5;
    --shadow-color: rgba(84, 110, 122, 0.2);
    --highlight-color: rgba(144, 164, 174, 0.2);
    
    --accent-primary-rgb: 84, 110, 122;
    --accent-secondary-rgb: 55, 71, 79;
    --accent-danger-rgb: 198, 40, 40;
}

/* Ruby Red Theme */
.theme-ruby-red {
    --bg-primary: #ffebee;
    --bg-secondary: #ffcdd2;
    --bg-tertiary: #ef9a9a;
    --bg-elevated: #e57373;
    
    --accent-primary: #d32f2f;
    --accent-secondary: #b71c1c;
    --accent-danger: #7f0000;
    
    --text-primary: #b71c1c;
    --text-secondary: #c62828;
    --text-muted: #d32f2f;
    
    --border-color: #ef9a9a;
    --shadow-color: rgba(211, 47, 47, 0.2);
    --highlight-color: rgba(229, 115, 115, 0.2);
    
    --accent-primary-rgb: 211, 47, 47;
    --accent-secondary-rgb: 183, 28, 28;
    --accent-danger-rgb: 127, 0, 0;
}

/* Deep Space Theme */
.theme-deep-space {
    --bg-primary: #1a237e;
    --bg-secondary: #283593;
    --bg-tertiary: #303f9f;
    --bg-elevated: #3949ab;
    
    --accent-primary: #7986cb;
    --accent-secondary: #5c6bc0;
    --accent-danger: #f44336;
    
    --text-primary: #e8eaf6;
    --text-secondary: #c5cae9;
    --text-muted: #9fa8da;
    
    --border-color: #3949ab;
    --shadow-color: rgba(26, 35, 126, 0.4);
    --highlight-color: rgba(121, 134, 203, 0.2);
    
    --accent-primary-rgb: 121, 134, 203;
    --accent-secondary-rgb: 92, 107, 192;
    --accent-danger-rgb: 244, 67, 54;
}

/* Emerald City Theme */
.theme-emerald-city {
    --bg-primary: #e8f5e9;
    --bg-secondary: #c8e6c9;
    --bg-tertiary: #a5d6a7;
    --bg-elevated: #81c784;
    
    --accent-primary: #2e7d32;
    --accent-secondary: #1b5e20;
    --accent-danger: #c62828;
    
    --text-primary: #1b5e20;
    --text-secondary: #2e7d32;
    --text-muted: #388e3c;
    
    --border-color: #a5d6a7;
    --shadow-color: rgba(46, 125, 50, 0.2);
    --highlight-color: rgba(129, 199, 132, 0.2);
    
    --accent-primary-rgb: 46, 125, 50;
    --accent-secondary-rgb: 27, 94, 32;
    --accent-danger-rgb: 198, 40, 40;
}

/* Golden Amber Theme */
.theme-golden-amber {
    --bg-primary: #fff8e1;
    --bg-secondary: #ffecb3;
    --bg-tertiary: #ffe082;
    --bg-elevated: #ffd54f;
    
    --accent-primary: #ffc107;
    --accent-secondary: #ff8f00;
    --accent-danger: #d50000;
    
    --text-primary: #ff6f00;
    --text-secondary: #ff8f00;
    --text-muted: #ffa000;
    
    --border-color: #ffe082;
    --shadow-color: rgba(255, 193, 7, 0.2);
    --highlight-color: rgba(255, 213, 79, 0.2);
    
    --accent-primary-rgb: 255, 193, 7;
    --accent-secondary-rgb: 255, 143, 0;
    --accent-danger-rgb: 213, 0, 0;
}

/* Monochrome Theme */
.theme-monochrome {
    --bg-primary: #fafafa;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #eeeeee;
    --bg-elevated: #e0e0e0;
    
    --accent-primary: #616161;
    --accent-secondary: #424242;
    --accent-danger: #b71c1c;
    
    --text-primary: #212121;
    --text-secondary: #424242;
    --text-muted: #757575;
    
    --border-color: #e0e0e0;
    --shadow-color: rgba(97, 97, 97, 0.2);
    --highlight-color: rgba(224, 224, 224, 0.5);
    
    --accent-primary-rgb: 97, 97, 97;
    --accent-secondary-rgb: 66, 66, 66;
    --accent-danger-rgb: 183, 28, 28;
}

/* Pastel Dream Theme */
.theme-pastel-dream {
    --bg-primary: #f8f9fa;
    --bg-secondary: #e9ecef;
    --bg-tertiary: #dee2e6;
    --bg-elevated: #ced4da;
    
    --accent-primary: #adb5bd;
    --accent-secondary: #6c757d;
    --accent-danger: #dc3545;
    
    --text-primary: #495057;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    
    --border-color: #dee2e6;
    --shadow-color: rgba(173, 181, 189, 0.2);
    --highlight-color: rgba(206, 212, 218, 0.5);
    
    --accent-primary-rgb: 173, 181, 189;
    --accent-secondary-rgb: 108, 117, 125;
    --accent-danger-rgb: 220, 53, 69;
}

/* Neon Pink Theme */
.theme-neon-pink {
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    --bg-elevated: #3a3a3a;
    
    --accent-primary: #ff00ff;
    --accent-secondary: #cc00cc;
    --accent-danger: #ff3333;
    
    --text-primary: #ffffff;
    --text-secondary: #f0f0f0;
    --text-muted: #c0c0c0;
    
    --border-color: #3a3a3a;
    --shadow-color: rgba(255, 0, 255, 0.3);
    --highlight-color: rgba(255, 0, 255, 0.1);
    
    --accent-primary-rgb: 255, 0, 255;
    --accent-secondary-rgb: 204, 0, 204;
    --accent-danger-rgb: 255, 51, 51;
    
    --card-bg: var(--bg-elevated);
    --card-border: var(--border-color);
    --card-body-bg: var(--bg-secondary);
    --card-body-color: var(--text-primary);
}

/* Vintage Paper Theme */
.theme-vintage-paper {
    --bg-primary: #f5f1e6;
    --bg-secondary: #e8e0cc;
    --bg-tertiary: #d5c7a7;
    --bg-elevated: #c2b091;
    
    --accent-primary: #8d7b68;
    --accent-secondary: #6e5c4a;
    --accent-danger: #a83232;
    
    --text-primary: #4a3c2c;
    --text-secondary: #6e5c4a;
    --text-muted: #8d7b68;
    
    --border-color: #d5c7a7;
    --shadow-color: rgba(141, 123, 104, 0.2);
    --highlight-color: rgba(194, 176, 145, 0.2);
    
    --accent-primary-rgb: 141, 123, 104;
    --accent-secondary-rgb: 110, 92, 74;
    --accent-danger-rgb: 168, 50, 50;
}

/* Aquamarine Theme */
.theme-aquamarine {
    --bg-primary: #e0f7fa;
    --bg-secondary: #b2ebf2;
    --bg-tertiary: #80deea;
    --bg-elevated: #4dd0e1;
    
    --accent-primary: #00acc1;
    --accent-secondary: #0097a7;
    --accent-danger: #d32f2f;
    
    --text-primary: #006064;
    --text-secondary: #00838f;
    --text-muted: #0097a7;
    
    --border-color: #80deea;
    --shadow-color: rgba(0, 172, 193, 0.2);
    --highlight-color: rgba(77, 208, 225, 0.2);
    
    --accent-primary-rgb: 0, 172, 193;
    --accent-secondary-rgb: 0, 151, 167;
    --accent-danger-rgb: 211, 47, 47;
}

/* Theme Application Classes */
body {
    background-color: var(--bg-primary, #ffffff);
    color: var(--text-primary, #212529);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card {
    background-color: var(--bg-secondary, #f8f9fa);
    border-color: var(--border-color, #dee2e6);
    box-shadow: var(--shadow-small) var(--shadow-color, rgba(0, 0, 0, 0.1));
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
    box-shadow: var(--shadow-medium) var(--shadow-color, rgba(0, 0, 0, 0.1));
    transform: translateY(-2px);
}

#content-home,
#content-tutorial,
#content-about,
#content-feedback,
.tab-pane {
    background-color: var(--bg-secondary, #f8f9fa);
    border-color: var(--border-color, #dee2e6);
    box-shadow: var(--shadow-small) var(--shadow-color, rgba(0, 0, 0, 0.1));
}

.nav-item {
    background-color: var(--bg-tertiary, #e9ecef);
    border-color: var(--border-color, #dee2e6);
    transition: background-color 0.3s ease;
}

.nav-item:hover {
    background-color: var(--bg-elevated, #dee2e6);
}

.nav-item .nav-link {
    color: var(--text-secondary, #495057);
}

.nav-item .nav-link:hover,
.nav-item .nav-link:focus {
    color: var(--accent-primary, #0d6efd);
}

.nav-item .nav-link.active {
    background-color: var(--accent-primary, #0d6efd);
    color: #ffffff;
}

textarea,
.form-control {
    background-color: var(--bg-secondary, #f8f9fa);
    border-color: var(--border-color, #dee2e6);
    color: var(--text-primary, #212529);
    box-shadow: inset var(--shadow-small) var(--shadow-color, rgba(0, 0, 0, 0.1));
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

textarea:focus,
.form-control:focus {
    background-color: var(--bg-primary, #ffffff);
    border-color: var(--accent-primary, #0d6efd);
    box-shadow: 0 0 0 0.25rem rgba(var(--accent-primary-rgb, 13, 110, 253), 0.25);
    color: var(--text-primary, #212529);
}

textarea::placeholder,
.form-control::placeholder {
    color: var(--text-muted, #6c757d);
}

.btn {
    border-radius: 4px;
    box-shadow: var(--shadow-small) var(--shadow-color, rgba(0, 0, 0, 0.1));
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium) var(--shadow-color, rgba(0, 0, 0, 0.1));
}

.btn:active {
    transform: translateY(1px);
    box-shadow: var(--shadow-small) var(--shadow-color, rgba(0, 0, 0, 0.1));
}

/* Custom button styles for each theme will inherit from Bootstrap base styles */

header,
footer {
    background-color: var(--bg-secondary, #f8f9fa);
    border-color: var(--border-color, #dee2e6);
    box-shadow: var(--shadow-small) var(--shadow-color, rgba(0, 0, 0, 0.1));
}

#tab-content-container {
    background-color: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: var(--shadow-medium) var(--shadow-color, rgba(0, 0, 0, 0.1));
}

.accordion-item {
    background-color: var(--bg-secondary, #f8f9fa);
    border-color: var(--border-color, #dee2e6);
}

.accordion-button {
    background-color: var(--bg-tertiary, #e9ecef);
    color: var(--text-primary, #212529);
}

.accordion-button:not(.collapsed) {
    background-color: var(--accent-primary, #0d6efd);
    color: #ffffff;
}

.accordion-button:focus {
    border-color: var(--accent-primary, #0d6efd);
    box-shadow: 0 0 0 0.25rem rgba(var(--accent-primary-rgb, 13, 110, 253), 0.25);
}

.accordion-collapse {
    background-color: var(--bg-secondary, #f8f9fa);
}

p {
    color: var(--accent-primary);
}

.progress {
    background-color: var(--bg-tertiary, #e9ecef);
    border-radius: 8px;
    box-shadow: inset var(--shadow-small) var(--shadow-color, rgba(0, 0, 0, 0.1));
}

.progress-bar {
    background-color: var(--accent-primary, #0d6efd);
}

.table {
    color: var(--text-primary, #212529);
}

.table > thead {
    background-color: var(--bg-tertiary, #e9ecef);
}

.table > :not(caption) > * > * {
    background-color: var(--bg-secondary, #f8f9fa);
    border-bottom-color: var(--border-color, #dee2e6);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--bg-tertiary, #e9ecef);
    color: var(--text-primary, #212529);
}

.alert {
    border-color: var(--border-color, #dee2e6);
}

.alert-success {
    background-color: rgba(var(--accent-secondary-rgb, 108, 117, 125), 0.1);
    color: var(--accent-secondary, #6c757d);
}

.alert-danger {
    background-color: rgba(var(--accent-danger-rgb, 220, 53, 69), 0.1);
    color: var(--accent-danger, #dc3545);
}

.alert-info {
    background-color: rgba(var(--accent-primary-rgb, 13, 110, 253), 0.1);
    color: var(--accent-primary, #0d6efd);
}

mark {
    background-color: rgba(var(--accent-primary-rgb, 13, 110, 253), 0.3);
    color: var(--text-primary, #212529);
    padding: 2px 4px;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }
    
    .btn {
        margin-bottom: 0.5rem;
    }
}