/* ============================================
   THEME DEFINITIONS
   All theme colors are defined here for easy reference
   ============================================ */

:root,
[data-theme="dark"] {
    /* Background Colors */
    --bg-color: #0a0a0f;
    --bg-gradient: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%);
    --panel-bg: rgba(20, 20, 30, 0.8);
    --panel-bg-opaque: #14141e;
    --card-bg: rgba(30, 30, 40, 0.6);
    --list-bg: rgba(20, 20, 30, 0.6);
    --entry-bg: rgba(30, 30, 40, 0.8);
    --entry-hover-bg: rgba(40, 40, 55, 0.9);
    --canvas-bg: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #1a1a2e;
    --border-primary: rgba(255, 255, 255, 0.1);
    --text-accent: var(--accent-color);

    /* Text Colors */
    --text-color: #ffffff;
    --text-muted: #888888;
    --text-secondary: #aaaaaa;

    /* Accent Colors */
    --accent-color: #9e9eff;
    --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --accent-glow: rgba(102, 126, 234, 0.4);
    --accent-hover: rgba(158, 158, 255, 0.5);
    --accent-bg: rgba(158, 158, 255, 0.1);
    --accent-bg-hover: rgba(158, 158, 255, 0.2);

    /* Border Colors */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.2);
    --glass-border: rgba(255, 255, 255, 0.1);

    /* Input/Form Colors */
    --input-bg: rgba(0, 0, 0, 0.3);
    --input-border: rgba(255, 255, 255, 0.15);
    --select-option-bg: #1a1a2e;
    --widget-bg: var(--input-bg);
    /* Default to input-bg for dark themes */

    /* Button Colors */
    --button-bg: rgba(30, 30, 40, 0.8);
    --button-border: rgba(255, 255, 255, 0.15);
    --button-text: #ffffff;

    /* Tab Colors */
    --tab-bg: rgba(30, 30, 40, 0.6);
    --tab-text: #aaaaaa;
    --tab-active-text: #ffffff;

    /* Scrollbar Colors */
    --scrollbar-track: rgba(255, 255, 255, 0.05);
    --scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);

    /* Deck Group Headers */
    --deck-header-bg: linear-gradient(to right, rgba(158, 158, 255, 0.15), transparent);
    --deck-header-border: rgba(158, 158, 255, 0.2);
    --deck-header-text: var(--accent-color);

    /* Popup/Modal Colors */
    --popup-bg: linear-gradient(145deg, #1a1a2e, #16213e);
    --popup-border: var(--accent-color);
    --popup-shadow: rgba(0, 0, 0, 0.6);
    --popup-section-border: #333333;

    /* Chart/Stat Colors */
    --chart-bg: rgba(0, 0, 0, 0.3);
    --chart-title-color: #888888;

    /* Divider/Collapse Colors */
    --divider-border: rgba(255, 255, 255, 0.05);
    --divider-btn-bg: #333333;
    --divider-btn-text: #aaaaaa;

    /* Scanning/Loading Colors */
    --scanning-bg: rgba(20, 20, 30, 0.95);
    --scanning-text: #ffffff;

    /* Pro Feature Colors */
    --pro-overlay-bg: rgba(10, 10, 15, 0.85);
    --pro-overlay-border: rgba(255, 215, 0, 0.4);
    --pro-text: #ccc;

    /* Card Type Colors */
    --type-creature: #27ae60;
    --type-land: #8B4513;
    --type-instant: #3498db;
    --type-sorcery: #e74c3c;
    --type-enchantment: #9b59b6;
    --type-artifact: #95a5a6;
    --type-planeswalker: #f39c12;
    --type-other: #666666;

    /* Semantic Colors */
    --danger-color: #ff6b6b;
    --danger-bg: rgba(255, 77, 77, 0.1);
    --danger-border: rgba(255, 77, 77, 0.3);

    --success-color: #4caf50;
    --success-bg: rgba(76, 175, 80, 0.1);
    --warning-color: #ffd700;
    --warning-bg: rgba(255, 215, 0, 0.1);

    --discord-color: #5865F2;

    /* Effects */
    --glass-blur: blur(12px);

    /* Responsive Breakpoints & Spacing */
    --mobile-width: 768px;
    --tablet-width: 1024px;
    --desktop-width: 1440px;

    --header-height: 60px;
    --mobile-header-height: 50px;
}

/* ============================================
   LIGHT THEME
   ============================================ */
[data-theme="light"] {
    /* Background Colors */
    --bg-color: #f5f5f7;
    --bg-gradient: linear-gradient(135deg, #f5f5f7 0%, #e8e8ec 50%, #f5f5f7 100%);
    --panel-bg: rgba(255, 255, 255, 0.9);
    --panel-bg-opaque: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.8);
    --list-bg: rgba(240, 240, 245, 0.9);
    --entry-bg: rgba(255, 255, 255, 0.8);
    --entry-hover-bg: rgba(255, 255, 255, 0.95);
    --canvas-bg: #f5f5f7;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f0f0f5;
    --border-primary: rgba(0, 0, 0, 0.1);
    --text-accent: #6366f1;

    /* Text Colors */
    --text-color: #1a1a1a;
    --text-muted: #666666;
    --text-secondary: #444444;

    /* Accent Colors */
    --accent-color: #818cf8;
    --accent-gradient: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #f472b6 100%);
    --accent-glow: rgba(129, 140, 248, 0.3);
    --accent-hover: rgba(167, 139, 250, 0.5);
    --accent-bg: rgba(124, 58, 237, 0.05);
    --accent-bg-hover: rgba(124, 58, 237, 0.1);

    /* Border Colors */
    --border-color: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.15);
    --glass-border: rgba(0, 0, 0, 0.08);

    /* Input/Form Colors */
    --input-bg: rgba(255, 255, 255, 0.9);
    --input-border: rgba(0, 0, 0, 0.1);
    --select-option-bg: #ffffff;
    --widget-bg: rgba(138, 43, 226, 0.08);
    /* Light lavender for widgets */

    /* Button Colors */
    --button-bg: rgba(255, 255, 255, 0.8);
    --button-border: rgba(0, 0, 0, 0.1);
    --button-text: #1a1a1a;

    /* Tab Colors */
    --tab-bg: rgba(255, 255, 255, 0.83);
    --tab-text: #666666;
    --tab-active-text: #1a1a1a;

    /* Scrollbar Colors */
    --scrollbar-track: rgba(0, 0, 0, 0.05);
    --scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);

    /* Deck Group Headers */
    --deck-header-bg: linear-gradient(to right, rgba(139, 92, 246, 0.1), transparent);
    --deck-header-border: rgba(139, 92, 246, 0.2);
    --deck-header-text: #7c3aed;
    /* Violet-600 */

    /* Popup/Modal Colors */
    --popup-bg: linear-gradient(145deg, #ffffff, #f0f0f5);
    --popup-border: var(--accent-color);
    --popup-shadow: rgba(0, 0, 0, 0.1);
    --popup-section-border: #e0e0e0;

    /* Chart/Stat Colors */
    --chart-bg: rgba(0, 0, 0, 0.05);
    --chart-title-color: #6366f1;

    /* Divider/Collapse Colors */
    --divider-border: rgba(0, 0, 0, 0.08);
    --divider-btn-bg: #e0e0e5;
    --divider-btn-text: #666666;

    /* Scanning/Loading Colors */
    --scanning-bg: rgba(255, 255, 255, 0.95);
    --scanning-text: #1a1a1a;

    /* Pro Feature Colors */
    --pro-overlay-bg: rgba(255, 255, 255, 0.8);
    --pro-overlay-border: rgba(255, 215, 0, 0.6);
    --pro-text: #333;

    /* Semantic Colors */
    --danger-color: #dc2626;
    --danger-bg: rgba(220, 38, 38, 0.1);
    --danger-border: rgba(220, 38, 38, 0.3);

    --success-color: #16a34a;
    --success-bg: rgba(22, 163, 74, 0.1);
    --warning-color: #ca8a04;
    --warning-bg: rgba(202, 138, 4, 0.1);

    --discord-color: #5865F2;

    /* Effects */
    --glass-blur: blur(12px);
}

/* ============================================
   MIDNIGHT BLUE THEME
   ============================================ */
[data-theme="midnight"] {
    /* Background Colors */
    --bg-color: #0d1117;
    --bg-gradient: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #0d1117 100%);
    --panel-bg: rgba(22, 27, 34, 0.95);
    --panel-bg-opaque: #161b22;
    --card-bg: rgba(22, 27, 34, 0.8);
    --list-bg: rgba(22, 27, 34, 0.6);
    --entry-bg: rgba(33, 38, 45, 0.8);
    --entry-hover-bg: rgba(48, 54, 61, 0.9);
    --canvas-bg: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #0d1117;
    --border-primary: #30363d;
    --text-accent: #58a6ff;

    /* Text Colors */
    --text-color: #e6edf3;
    --text-muted: #7d8590;
    --text-secondary: #8b949e;

    /* Accent Colors */
    --accent-color: #58a6ff;
    --accent-gradient: linear-gradient(135deg, #58a6ff 0%, #1f6feb 50%, #388bfd 100%);
    --accent-glow: rgba(88, 166, 255, 0.2);
    --accent-hover: rgba(88, 166, 255, 0.4);
    --accent-bg: rgba(88, 166, 255, 0.1);
    --accent-bg-hover: rgba(88, 166, 255, 0.2);

    /* Border Colors */
    --border-color: rgba(48, 54, 61, 0.8);
    --border-hover: #58a6ff;
    --glass-border: rgba(48, 54, 61, 0.6);

    /* Input/Form Colors */
    --input-bg: #0d1117;
    --input-border: #30363d;
    --select-option-bg: #161b22;
    --widget-bg: var(--input-bg);

    /* Deck Group Headers */
    --deck-header-bg: linear-gradient(to right, rgba(88, 166, 255, 0.15), transparent);
    --deck-header-border: rgba(88, 166, 255, 0.3);
    --deck-header-text: var(--accent-color);

    /* Button Colors */
    --button-bg: #21262d;
    --button-border: rgba(240, 246, 252, 0.1);
    --button-text: #c9d1d9;

    /* Tab Colors */
    --tab-bg: #21262d;
    --tab-text: #8b949e;
    --tab-active-text: #f0f6fc;

    /* Scrollbar Colors */
    --scrollbar-track: rgba(48, 54, 61, 0.3);
    --scrollbar-thumb: #30363d;

    /* Popup/Modal Colors */
    --popup-bg: #161b22;
    --popup-border: #30363d;
    --popup-shadow: rgba(1, 4, 9, 0.8);
    --popup-section-border: #30363d;

    /* Chart/Stat Colors */
    --chart-bg: rgba(22, 27, 34, 0.6);
    --chart-title-color: #7d8590;

    /* Divider/Collapse Colors */
    --divider-border: #30363d;
    --divider-btn-bg: #21262d;
    --divider-btn-text: #8b949e;

    /* Scanning/Loading Colors */
    --scanning-bg: rgba(13, 17, 23, 0.98);
    --scanning-text: #e6edf3;

    /* Pro Feature Colors */
    --pro-overlay-bg: rgba(13, 17, 23, 0.85);
    --pro-overlay-border: rgba(88, 166, 255, 0.4);
    --pro-text: #7d8590;

    /* Card Type Colors */
    --type-creature: #3fb950;
    --type-land: #a0522d;
    --type-instant: #58a6ff;
    --type-sorcery: #fa7970;
    --type-enchantment: #bc8cff;
    --type-artifact: #8b949e;
    --type-planeswalker: #d29922;
    --type-other: #6e7681;

    /* Semantic Colors */
    --danger-color: #f85149;
    --danger-bg: rgba(248, 81, 73, 0.1);
    --danger-border: rgba(248, 81, 73, 0.4);

    --success-color: #3fb950;
    --success-bg: rgba(63, 185, 80, 0.1);

    --warning-color: #d29922;
    --warning-bg: rgba(210, 153, 34, 0.1);

    --discord-color: #5865F2;

    /* Effects */
    --glass-blur: blur(12px);
}

/* ============================================
   MYSTICAL FOREST THEME
   Woodsy, Dark Green and Brown
   ============================================ */
[data-theme="forest"] {
    /* Background Colors */
    --bg-color: #0d1a0d;
    --bg-gradient: linear-gradient(135deg, #0d1a0d 0%, #1a2e1a 50%, #0d1a0d 100%);
    --panel-bg: rgba(20, 35, 20, 0.95);
    --panel-bg-opaque: #142314;
    --card-bg: rgba(26, 40, 26, 0.8);
    --list-bg: rgba(13, 26, 13, 0.7);
    --entry-bg: rgba(30, 50, 30, 0.8);
    --entry-hover-bg: rgba(40, 65, 40, 0.9);
    --canvas-bg: #0d1a0d;
    --bg-secondary: #1a2e1a;
    --bg-tertiary: #0d1a0d;
    --border-primary: rgba(139, 115, 85, 0.2);
    /* Muted brown */
    --text-accent: #a8d5ba;

    /* Text Colors */
    --text-color: #e8f5e9;
    --text-muted: #8d9e8d;
    --text-secondary: #b0c4b0;

    /* Accent Colors */
    --accent-color: #66bb6a;
    --accent-gradient: linear-gradient(135deg, #2e7d32 0%, #66bb6a 50%, #8d6e63 100%);
    --accent-glow: rgba(102, 187, 106, 0.3);
    --accent-hover: rgba(102, 187, 106, 0.5);
    --accent-bg: rgba(102, 187, 106, 0.1);
    --accent-bg-hover: rgba(102, 187, 106, 0.2);

    /* Border Colors */
    --border-color: rgba(139, 115, 85, 0.3);
    --border-hover: #66bb6a;
    --glass-border: rgba(139, 115, 85, 0.2);

    /* Input/Form Colors */
    --input-bg: rgba(10, 20, 10, 0.6);
    --input-border: rgba(139, 115, 85, 0.4);
    --select-option-bg: #1a2e1a;
    --widget-bg: var(--input-bg);

    /* Deck Group Headers */
    --deck-header-bg: linear-gradient(to right, rgba(102, 187, 106, 0.15), transparent);
    --deck-header-border: rgba(102, 187, 106, 0.3);
    --deck-header-text: var(--accent-color);

    /* Button Colors */
    --button-bg: #2e4a2e;
    --button-border: rgba(139, 115, 85, 0.3);
    --button-text: #e8f5e9;

    /* Tab Colors */
    --tab-bg: #1a2e1a;
    --tab-text: #8d9e8d;
    --tab-active-text: #e8f5e9;

    /* Scrollbar Colors */
    --scrollbar-track: rgba(13, 26, 13, 0.3);
    --scrollbar-thumb: #3e5c3e;
    --scrollbar-thumb-hover: #4e7c4e;

    /* Popup/Modal Colors */
    --popup-bg: #1a2e1a;
    --popup-border: rgba(139, 115, 85, 0.5);
    --popup-shadow: rgba(0, 0, 0, 0.8);
    --popup-section-border: rgba(139, 115, 85, 0.3);

    /* Chart/Stat Colors */
    --chart-bg: rgba(13, 26, 13, 0.6);
    --chart-title-color: #8d9e8d;

    /* Divider/Collapse Colors */
    --divider-border: rgba(139, 115, 85, 0.2);
    --divider-btn-bg: #2e4a2e;
    --divider-btn-text: #8d9e8d;

    /* Pro Feature Colors */
    --pro-overlay-bg: rgba(10, 20, 10, 0.85);
    --pro-overlay-border: #ffd700;
    --pro-text: #8d9e8d;

    /* Semantic Colors */
    --danger-color: #ff5252;
    --danger-bg: rgba(255, 82, 82, 0.1);
    --success-color: #66bb6a;
    --success-bg: rgba(102, 187, 106, 0.1);
    --warning-color: #ffa726;
    --warning-bg: rgba(255, 167, 38, 0.1);
}

/* ============================================
   ELECTRIC SHOWCASE THEME
   Light, Yellow and Orange
   ============================================ */
[data-theme="electric"] {
    /* Background Colors */
    --bg-color: #fffaf0;
    --bg-gradient: linear-gradient(135deg, #fffaf0 0%, #fff3e0 50%, #fffaf0 100%);
    --panel-bg: rgba(255, 255, 255, 0.9);
    --panel-bg-opaque: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.85);
    --list-bg: rgba(255, 243, 224, 0.6);
    --entry-bg: rgba(255, 255, 255, 0.8);
    --entry-hover-bg: rgba(255, 248, 225, 0.95);
    --canvas-bg: #fffaf0;
    --bg-secondary: #ffffff;
    --bg-tertiary: #fff3e0;
    --border-primary: rgba(255, 152, 0, 0.2);
    --text-accent: #f57c00;

    /* Text Colors */
    --text-color: #3e2723;
    --text-muted: #8d6e63;
    --text-secondary: #5d4037;

    /* Accent Colors */
    --accent-color: #ff9800;
    --accent-gradient: linear-gradient(135deg, #ffb300 0%, #ff9800 50%, #f44336 100%);
    --accent-glow: rgba(255, 152, 0, 0.3);
    --accent-hover: rgba(255, 152, 0, 0.5);
    --accent-bg: rgba(255, 152, 0, 0.1);
    --accent-bg-hover: rgba(255, 152, 0, 0.2);

    /* Border Colors */
    --border-color: rgba(255, 152, 0, 0.3);
    --border-hover: #ff9800;
    --glass-border: rgba(255, 152, 0, 0.2);

    /* Input/Form Colors */
    --input-bg: #ffffff;
    --input-border: rgba(255, 152, 0, 0.4);
    --select-option-bg: #ffffff;
    --widget-bg: rgba(255, 235, 59, 0.15);

    /* Deck Group Headers */
    --deck-header-bg: linear-gradient(to right, rgba(255, 152, 0, 0.15), transparent);
    --deck-header-border: rgba(255, 152, 0, 0.3);
    --deck-header-text: #e65100;

    /* Button Colors */
    --button-bg: #fff3e0;
    --button-border: rgba(255, 152, 0, 0.4);
    --button-text: #3e2723;

    /* Tab Colors */
    --tab-bg: #fff3e0;
    --tab-text: #8d6e63;
    --tab-active-text: #e65100;

    /* Scrollbar Colors */
    --scrollbar-track: rgba(255, 152, 0, 0.05);
    --scrollbar-thumb: rgba(255, 152, 0, 0.3);
    --scrollbar-thumb-hover: rgba(255, 152, 0, 0.5);

    /* Popup/Modal Colors */
    --popup-bg: #ffffff;
    --popup-border: #ff9800;
    --popup-shadow: rgba(255, 152, 0, 0.15);
    --popup-section-border: #ffe0b2;

    /* Chart/Stat Colors */
    --chart-bg: rgba(255, 255, 255, 0.6);
    --chart-title-color: #f57c00;

    /* Divider/Collapse Colors */
    --divider-border: #ffe0b2;
    --divider-btn-bg: #fff3e0;
    --divider-btn-text: #8d6e63;

    /* Pro Feature Colors */
    --pro-overlay-bg: rgba(255, 255, 255, 0.85);
    --pro-overlay-border: #ff9800;
    --pro-text: #5d4037;

    /* Semantic Colors */
    --danger-color: #f44336;
    --danger-bg: rgba(244, 67, 54, 0.1);
    --success-color: #4caf50;
    --success-bg: rgba(76, 175, 80, 0.1);
    --warning-color: #ff9800;
    --warning-bg: rgba(255, 152, 0, 0.1);
}