/* Theme System - Dynamic CSS Variables */

/* Default Ethereal Theme */
:root[data-theme="ethereal"], :root {
    --primary-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-bg: rgba(102, 126, 234, 0.1);
    --accent-color: #667eea;
    --accent-hover: #5a6fd8;
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --text-light: #ecf0f1;
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: rgba(255, 255, 255, 0.15);
    --shadow-color: rgba(102, 126, 234, 0.2);
    --ethereal-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Forest Green Theme */
:root[data-theme="forest"] {
    --primary-bg: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
    --secondary-bg: rgba(19, 78, 94, 0.1);
    --accent-color: #71b280;
    --accent-hover: #5a9067;
    --text-primary: #1e3c32;
    --text-secondary: #4a6741;
    --text-light: #e8f5e8;
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: rgba(113, 178, 128, 0.15);
    --shadow-color: rgba(19, 78, 94, 0.2);
    --ethereal-primary: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
}

/* Ocean Blue Theme */
:root[data-theme="ocean"] {
    --primary-bg: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    --secondary-bg: rgba(30, 60, 114, 0.1);
    --accent-color: #2a5298;
    --accent-hover: #1e3c72;
    --text-primary: #1a252f;
    --text-secondary: #34495e;
    --text-light: #e8f4f8;
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: rgba(42, 82, 152, 0.15);
    --shadow-color: rgba(30, 60, 114, 0.2);
    --ethereal-primary: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}

/* Sunset Orange Theme */
:root[data-theme="sunset"] {
    --primary-bg: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    --secondary-bg: rgba(255, 107, 53, 0.1);
    --accent-color: #ff6b35;
    --accent-hover: #e55a2b;
    --text-primary: #2c1810;
    --text-secondary: #8b4513;
    --text-light: #fff8f0;
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: rgba(255, 107, 53, 0.15);
    --shadow-color: rgba(255, 107, 53, 0.2);
    --ethereal-primary: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
}

/* Midnight Dark Theme */
:root[data-theme="midnight"] {
    --primary-bg: linear-gradient(135deg, #0c0c0c 0%, #2c2c2c 100%);
    --secondary-bg: rgba(44, 44, 44, 0.3);
    --accent-color: #6c7ce7;
    --accent-hover: #5a68d4;
    --text-primary: #f8f9fa;
    --text-secondary: #adb5bd;
    --text-light: #ffffff;
    --card-bg: rgba(44, 44, 44, 0.95);
    --card-border: rgba(108, 124, 231, 0.15);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --ethereal-primary: linear-gradient(135deg, #0c0c0c 0%, #2c2c2c 100%);
}

/* Lavender Purple Theme */
:root[data-theme="lavender"] {
    --primary-bg: linear-gradient(135deg, #8360c3 0%, #2ebf91 100%);
    --secondary-bg: rgba(131, 96, 195, 0.1);
    --accent-color: #8360c3;
    --accent-hover: #6d4c9f;
    --text-primary: #2d1b3d;
    --text-secondary: #6a5acd;
    --text-light: #f3f0ff;
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: rgba(131, 96, 195, 0.15);
    --shadow-color: rgba(131, 96, 195, 0.2);
    --ethereal-primary: linear-gradient(135deg, #8360c3 0%, #2ebf91 100%);
}

/* Autumn Warm Theme */
:root[data-theme="autumn"] {
    --primary-bg: linear-gradient(135deg, #d2691e 0%, #cd853f 100%);
    --secondary-bg: rgba(210, 105, 30, 0.1);
    --accent-color: #d2691e;
    --accent-hover: #b8541a;
    --text-primary: #2f1b14;
    --text-secondary: #8b4513;
    --text-light: #faf0e6;
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: rgba(210, 105, 30, 0.15);
    --shadow-color: rgba(210, 105, 30, 0.2);
    --ethereal-primary: linear-gradient(135deg, #d2691e 0%, #cd853f 100%);
}

/* Monochrome Theme */
:root[data-theme="monochrome"] {
    --primary-bg: linear-gradient(135deg, #2c2c2c 0%, #4a4a4a 100%);
    --secondary-bg: rgba(74, 74, 74, 0.1);
    --accent-color: #6c757d;
    --accent-hover: #5a6268;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-light: #f8f9fa;
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: rgba(108, 117, 125, 0.15);
    --shadow-color: rgba(44, 44, 44, 0.2);
    --ethereal-primary: linear-gradient(135deg, #2c2c2c 0%, #4a4a4a 100%);
}

/* Maroon Elegance Theme */
:root[data-theme="maroon"] {
    --primary-bg: linear-gradient(135deg, #722f37 0%, #9d2933 100%);
    --secondary-bg: rgba(114, 47, 55, 0.1);
    --accent-color: #9d2933;
    --accent-hover: #7a1f28;
    --text-primary: #2a0f12;
    --text-secondary: #5d1a1f;
    --text-light: #fdf2f3;
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: rgba(157, 41, 51, 0.15);
    --shadow-color: rgba(114, 47, 55, 0.25);
    --ethereal-primary: linear-gradient(135deg, #722f37 0%, #9d2933 100%);
}

/* Pink Paradise Theme */
:root[data-theme="pink"] {
    --primary-bg: linear-gradient(135deg, #e91e63 0%, #ff6b9d 50%, #ffa8cc 100%);
    --secondary-bg: rgba(233, 30, 99, 0.1);
    --accent-color: #e91e63;
    --accent-hover: #d81b60;
    --text-primary: #4a1a2f;
    --text-secondary: #8b4a62;
    --text-light: #fff0f5;
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: rgba(233, 30, 99, 0.15);
    --shadow-color: rgba(233, 30, 99, 0.25);
    --ethereal-primary: linear-gradient(135deg, #e91e63 0%, #ff6b9d 50%, #ffa8cc 100%);
}

/* Theme Class Styles */
.theme-pink-paradise {
    background: linear-gradient(135deg, #e91e63 0%, #ff6b9d 50%, #ffa8cc 100%) !important;
}

/* Apply theme variables to common elements */
body {
    background: var(--ethereal-primary) !important;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.btn-primary, .tool-button {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.btn-primary:hover, .tool-button:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.card, .bookshelf-container, .tools-panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 8px 32px var(--shadow-color);
}

.dashboard-hero, .workshop-header {
    background: var(--primary-bg) !important;
}

.tool-icon {
    background: var(--accent-color);
}

/* Theme Modal Styling */
.theme-card {
    transition: all 0.3s ease;
}

.theme-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: var(--accent-color) !important;
}

/* Creative Sparks Styling */
.spark-card {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    transition: all 0.3s ease;
    height: 100%;
}

.spark-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--shadow-color);
}

.spark-card .card-header {
    background: var(--secondary-bg);
    border-bottom: 1px solid var(--card-border);
    color: var(--text-primary);
}

.spark-card .card-body {
    color: var(--text-primary);
    min-height: 120px;
    display: flex;
    align-items: center;
}

.spark-card .card-text {
    line-height: 1.6;
    font-style: italic;
}

.creative-spark-display {
    padding: 2rem;
}

.spark-emoji {
    font-size: 3rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.creative-spark-display blockquote {
    border-left: 4px solid var(--accent-color);
    background: var(--secondary-bg);
    padding: 1.5rem;
    border-radius: 10px;
    font-style: italic;
}

.creative-spark-display blockquote p {
    color: var(--text-primary) !important;
    margin-bottom: 0;
}