/* ============================================================================
   DEFAULT THEME - Clean & Professional
   ============================================================================ */
:root {
    --bg-primary: #f5f7fa;
    --bg-secondary: #ffffff;
    --text-primary: #2d3748;
    --text-muted: #718096;
    --border-color: #e2e8f0;
    --input-bg: #ffffff;
    --shadow: rgba(0, 0, 0, 0.1);
    
    --primary-color: #4299e1;
    --primary-hover: #3182ce;
    --secondary-color: #a0aec0;
    --secondary-hover: #718096;
    --success-color: #48bb78;
    --success-hover: #38a169;
    --warning-color: #ed8936;
    --error-color: #f56565;
    --error-hover: #e53e3e;
    
    --level-1-color: #4299e1;
    --level-2-color: #48bb78;
    --level-3-color: #ed8936;
    --level-4-color: #9f7aea;
    
    --status-not-started: #edf2f7;
    --status-not-started-text: #718096;
    --status-in-progress: #4299e1;
    --status-completed: #48bb78;
    --status-blocked: #f56565;
    --status-on-hold: #ed8936;
}

/* ============================================================================
   GITHUB THEME - Developer Favorite
   Inspired by GitHub's UI - clean, professional, excellent contrast
   ============================================================================ */
body.theme-github {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --text-primary: #e6edf3;
    --text-muted: #7d8590;
    --border-color: #30363d;
    --input-bg: #0d1117;
    --shadow: rgba(0, 0, 0, 0.3);
    
    --primary-color: #238636;
    --primary-hover: #2ea043;
    --secondary-color: #6e7681;
    --secondary-hover: #8b949e;
    --success-color: #3fb950;
    --success-hover: #56d364;
    --warning-color: #d29922;
    --error-color: #f85149;
    --error-hover: #da3633;
    
    --level-1-color: #58a6ff;
    --level-2-color: #3fb950;
    --level-3-color: #d29922;
    --level-4-color: #bc8cff;
    
    --status-not-started: #21262d;
    --status-not-started-text: #7d8590;
    --status-in-progress: #58a6ff;
    --status-completed: #3fb950;
    --status-blocked: #f85149;
    --status-on-hold: #d29922;
}

/* ============================================================================
   NOTION THEME - Modern & Clean
   Inspired by Notion - minimal, excellent readability
   ============================================================================ */
body.theme-notion {
    --bg-primary: #f7f6f3;
    --bg-secondary: #ffffff;
    --text-primary: #37352f;
    --text-muted: #787774;
    --border-color: #e3e2df;
    --input-bg: #ffffff;
    --shadow: rgba(15, 15, 15, 0.1);
    
    --primary-color: #2383e2;
    --primary-hover: #1a6bc1;
    --secondary-color: #9b9a97;
    --secondary-hover: #787774;
    --success-color: #0f7b6c;
    --success-hover: #0c6358;
    --warning-color: #d9730d;
    --error-color: #e03e3e;
    --error-hover: #c03131;
    
    --level-1-color: #2383e2;
    --level-2-color: #0f7b6c;
    --level-3-color: #d9730d;
    --level-4-color: #9065b0;
    
    --status-not-started: #e3e2e0;
    --status-not-started-text: #787774;
    --status-in-progress: #2383e2;
    --status-completed: #0f7b6c;
    --status-blocked: #e03e3e;
    --status-on-hold: #d9730d;
}

/* ============================================================================
   DRACULA THEME - Popular Developer Theme
   High contrast, vibrant colors, easy on eyes
   ============================================================================ */
body.theme-dracula {
    --bg-primary: #282a36;
    --bg-secondary: #44475a;
    --text-primary: #f8f8f2;
    --text-muted: #6272a4;
    --border-color: #6272a4;
    --input-bg: #44475a;
    --shadow: rgba(0, 0, 0, 0.4);
    
    --primary-color: #bd93f9;
    --primary-hover: #a47ddd;
    --secondary-color: #6272a4;
    --secondary-hover: #8292c4;
    --success-color: #50fa7b;
    --success-hover: #5af78e;
    --warning-color: #ffb86c;
    --error-color: #ff5555;
    --error-hover: #ff6e6e;
    
    --level-1-color: #8be9fd;
    --level-2-color: #50fa7b;
    --level-3-color: #ffb86c;
    --level-4-color: #ff79c6;
    
    --status-not-started: #6272a4;
    --status-not-started-text: #f8f8f2;
    --status-in-progress: #8be9fd;
    --status-completed: #50fa7b;
    --status-blocked: #ff5555;
    --status-on-hold: #ffb86c;
}

/* ============================================================================
   NORD THEME - Cool & Calm
   Popular among developers, blue/cyan focused
   ============================================================================ */
body.theme-nord {
    --bg-primary: #2e3440;
    --bg-secondary: #3b4252;
    --text-primary: #eceff4;
    --text-muted: #d8dee9;
    --border-color: #4c566a;
    --input-bg: #3b4252;
    --shadow: rgba(0, 0, 0, 0.3);
    
    --primary-color: #88c0d0;
    --primary-hover: #81a1c1;
    --secondary-color: #5e81ac;
    --secondary-hover: #81a1c1;
    --success-color: #a3be8c;
    --success-hover: #b5cc9c;
    --warning-color: #ebcb8b;
    --error-color: #bf616a;
    --error-hover: #d08770;
    
    --level-1-color: #88c0d0;
    --level-2-color: #a3be8c;
    --level-3-color: #ebcb8b;
    --level-4-color: #b48ead;
    
    --status-not-started: #4c566a;
    --status-not-started-text: #d8dee9;
    --status-in-progress: #88c0d0;
    --status-completed: #a3be8c;
    --status-blocked: #bf616a;
    --status-on-hold: #ebcb8b;
}

/* ============================================================================
   GRUVBOX THEME - Warm & Retro
   Retro groove colors, warm and comfortable
   ============================================================================ */
body.theme-gruvbox {
    --bg-primary: #282828;
    --bg-secondary: #3c3836;
    --text-primary: #ebdbb2;
    --text-muted: #a89984;
    --border-color: #504945;
    --input-bg: #3c3836;
    --shadow: rgba(0, 0, 0, 0.4);
    
    --primary-color: #458588;
    --primary-hover: #83a598;
    --secondary-color: #928374;
    --secondary-hover: #a89984;
    --success-color: #98971a;
    --success-hover: #b8bb26;
    --warning-color: #d79921;
    --error-color: #cc241d;
    --error-hover: #fb4934;
    
    --level-1-color: #458588;
    --level-2-color: #98971a;
    --level-3-color: #d79921;
    --level-4-color: #b16286;
    
    --status-not-started: #504945;
    --status-not-started-text: #a89984;
    --status-in-progress: #458588;
    --status-completed: #98971a;
    --status-blocked: #cc241d;
    --status-on-hold: #d79921;
}

/* ============================================================================
   LINEAR THEME - Modern SaaS
   Inspired by Linear app - purple accent, modern
   ============================================================================ */
body.theme-linear {
    --bg-primary: #16181d;
    --bg-secondary: #1c1f26;
    --text-primary: #e6edf3;
    --text-muted: #8b949e;
    --border-color: #2d333b;
    --input-bg: #22272e;
    --shadow: rgba(0, 0, 0, 0.3);
    
    --primary-color: #5e6ad2;
    --primary-hover: #7178e0;
    --secondary-color: #545d6c;
    --secondary-hover: #6b7485;
    --success-color: #26a641;
    --success-hover: #2fb346;
    --warning-color: #bf8700;
    --error-color: #f85149;
    --error-hover: #ff6b6b;
    
    --level-1-color: #5e6ad2;
    --level-2-color: #26a641;
    --level-3-color: #bf8700;
    --level-4-color: #a371f7;
    
    --status-not-started: #2d333b;
    --status-not-started-text: #8b949e;
    --status-in-progress: #5e6ad2;
    --status-completed: #26a641;
    --status-blocked: #f85149;
    --status-on-hold: #bf8700;
}

/* ============================================================================
   SOLARIZED DARK - Classic
   Precision colors for machines and people
   ============================================================================ */
body.theme-solarized {
    --bg-primary: #002b36;
    --bg-secondary: #073642;
    --text-primary: #839496;
    --text-muted: #586e75;
    --border-color: #073642;
    --input-bg: #073642;
    --shadow: rgba(0, 0, 0, 0.4);
    
    --primary-color: #268bd2;
    --primary-hover: #2aa198;
    --secondary-color: #657b83;
    --secondary-hover: #839496;
    --success-color: #859900;
    --success-hover: #a1b500;
    --warning-color: #b58900;
    --error-color: #dc322f;
    --error-hover: #cb4b16;
    
    --level-1-color: #268bd2;
    --level-2-color: #859900;
    --level-3-color: #b58900;
    --level-4-color: #d33682;
    
    --status-not-started: #073642;
    --status-not-started-text: #586e75;
    --status-in-progress: #268bd2;
    --status-completed: #859900;
    --status-blocked: #dc322f;
    --status-on-hold: #b58900;
}

/* ============================================================================
   TOKYO NIGHT - Trendy Dark
   Popular VS Code theme, vibrant night colors
   ============================================================================ */
body.theme-tokyo {
    --bg-primary: #1a1b26;
    --bg-secondary: #24283b;
    --text-primary: #c0caf5;
    --text-muted: #565f89;
    --border-color: #292e42;
    --input-bg: #24283b;
    --shadow: rgba(0, 0, 0, 0.4);
    
    --primary-color: #7aa2f7;
    --primary-hover: #89b4fa;
    --secondary-color: #565f89;
    --secondary-hover: #6b7394;
    --success-color: #9ece6a;
    --success-hover: #b9f27c;
    --warning-color: #e0af68;
    --error-color: #f7768e;
    --error-hover: #ff9faf;
    
    --level-1-color: #7aa2f7;
    --level-2-color: #9ece6a;
    --level-3-color: #e0af68;
    --level-4-color: #bb9af7;
    
    --status-not-started: #292e42;
    --status-not-started-text: #565f89;
    --status-in-progress: #7aa2f7;
    --status-completed: #9ece6a;
    --status-blocked: #f7768e;
    --status-on-hold: #e0af68;
}

/* ============================================================================
   CATPPUCCIN MOCHA - Soothing Pastel
   Trendy pastel theme, easy on eyes
   ============================================================================ */
body.theme-catppuccin {
    --bg-primary: #1e1e2e;
    --bg-secondary: #313244;
    --text-primary: #cdd6f4;
    --text-muted: #a6adc8;
    --border-color: #45475a;
    --input-bg: #313244;
    --shadow: rgba(0, 0, 0, 0.4);
    
    --primary-color: #89b4fa;
    --primary-hover: #b4befe;
    --secondary-color: #6c7086;
    --secondary-hover: #7f849c;
    --success-color: #a6e3a1;
    --success-hover: #b9f0b6;
    --warning-color: #f9e2af;
    --error-color: #f38ba8;
    --error-hover: #f5a8bd;
    
    --level-1-color: #89b4fa;
    --level-2-color: #a6e3a1;
    --level-3-color: #f9e2af;
    --level-4-color: #cba6f7;
    
    --status-not-started: #45475a;
    --status-not-started-text: #a6adc8;
    --status-in-progress: #89b4fa;
    --status-completed: #a6e3a1;
    --status-blocked: #f38ba8;
    --status-on-hold: #f9e2af;
}

/* ============================================================================
   MATERIAL DESIGN - Google's Design System
   Clean, bold, colorful
   ============================================================================ */
body.theme-material {
    --bg-primary: #fafafa;
    --bg-secondary: #ffffff;
    --text-primary: #212121;
    --text-muted: #757575;
    --border-color: #e0e0e0;
    --input-bg: #ffffff;
    --shadow: rgba(0, 0, 0, 0.12);
    
    --primary-color: #2196f3;
    --primary-hover: #1976d2;
    --secondary-color: #757575;
    --secondary-hover: #616161;
    --success-color: #4caf50;
    --success-hover: #388e3c;
    --warning-color: #ff9800;
    --error-color: #f44336;
    --error-hover: #d32f2f;
    
    --level-1-color: #2196f3;
    --level-2-color: #4caf50;
    --level-3-color: #ff9800;
    --level-4-color: #9c27b0;
    
    --status-not-started: #e0e0e0;
    --status-not-started-text: #757575;
    --status-in-progress: #2196f3;
    --status-completed: #4caf50;
    --status-blocked: #f44336;
    --status-on-hold: #ff9800;
}

/* ============================================================================
   ROSÉ PINE - Elegant & Soft
   Natural, low-contrast palette
   ============================================================================ */
body.theme-rose {
    --bg-primary: #191724;
    --bg-secondary: #1f1d2e;
    --text-primary: #e0def4;
    --text-muted: #908caa;
    --border-color: #26233a;
    --input-bg: #1f1d2e;
    --shadow: rgba(0, 0, 0, 0.4);
    
    --primary-color: #c4a7e7;
    --primary-hover: #d4b7f7;
    --secondary-color: #6e6a86;
    --secondary-hover: #908caa;
    --success-color: #9ccfd8;
    --success-hover: #b4dfe5;
    --warning-color: #f6c177;
    --error-color: #eb6f92;
    --error-hover: #f58fad;
    
    --level-1-color: #c4a7e7;
    --level-2-color: #9ccfd8;
    --level-3-color: #f6c177;
    --level-4-color: #ebbcba;
    
    --status-not-started: #26233a;
    --status-not-started-text: #908caa;
    --status-in-progress: #c4a7e7;
    --status-completed: #9ccfd8;
    --status-blocked: #eb6f92;
    --status-on-hold: #f6c177;
}