/* ============================================
   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);
    --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;

    /* 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);

    /* 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;

    /* 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);

    /* 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;

    /* 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);
    --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;

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

    /* Accent Colors */
    --accent-color: #6366f1;
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    --accent-glow: rgba(99, 102, 241, 0.3);
    --accent-hover: rgba(99, 102, 241, 0.5);

    /* Border Colors */
    --border-color: rgba(241, 232, 232, 0.904);
    --border-hover: rgba(0, 0, 0, 0.2);
    --glass-border: rgba(0, 0, 0, 0.1);

    /* Input/Form Colors */
    --input-bg: rgba(255, 255, 255, 0.9);
    --input-border: rgba(0, 0, 0, 0.15);
    --select-option-bg: #ffffff;

    /* Button Colors */
    --button-bg: rgba(255, 255, 255, 0.8);
    --button-border: rgba(0, 0, 0, 0.15);
    --button-text: #cdf7ff;

    /* Tab Colors */
    --tab-bg: rgba(255, 255, 255, 0.829);
    --tab-text: #666666;
    --tab-active-text: #ffffff;

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

    /* Popup/Modal Colors */
    --popup-bg: linear-gradient(145deg, #ffffff, #f0f0f5);
    --popup-border: var(--accent-color);
    --popup-shadow: rgba(0, 0, 0, 0.15);
    --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;

    /* 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(13, 17, 23, 0.95);
    --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;

    /* Text Colors */
    --text-color: #c9d1d9;
    --text-muted: #768390;
    --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.3);
    --accent-hover: rgba(88, 166, 255, 0.5);

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

    /* Input/Form Colors */
    --input-bg: rgba(22, 27, 34, 0.8);
    --input-border: rgba(48, 54, 61, 0.6);
    --select-option-bg: #161b22;

    /* Button Colors */
    --button-bg: rgba(22, 27, 34, 0.8);
    --button-border: rgba(48, 54, 61, 0.6);
    --button-text: #c9d1d9;

    /* Tab Colors */
    --tab-bg: rgba(22, 27, 34, 0.6);
    --tab-text: #8b949e;
    --tab-active-text: #ffffff;

    /* Scrollbar Colors */
    --scrollbar-track: rgba(48, 54, 61, 0.3);
    --scrollbar-thumb: rgba(88, 166, 255, 0.4);

    /* Popup/Modal Colors */
    --popup-bg: linear-gradient(145deg, #161b22, #0d1117);
    --popup-border: var(--accent-color);
    --popup-shadow: rgba(0, 0, 0, 0.6);
    --popup-section-border: #30363d;

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

    /* Divider/Collapse Colors */
    --divider-border: rgba(48, 54, 61, 0.6);
    --divider-btn-bg: #21262d;
    --divider-btn-text: #8b949e;

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

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

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