/* ============================================
   THEME VARIABLES
   ============================================ */

:root {
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-surface: #ffffff;
    --bg-overlay: rgba(0, 0, 0, 0.6);
    
    /* Text Colors */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-inverse: #ffffff;
    
    /* Border Colors */
    --border-light: #f0f0f0;
    --border-medium: #e0e0e0;
    --border-dark: #ddd;
    
    /* Modal Specific */
    --modal-bg: #ffffff;
    --modal-overlay: rgba(0, 0, 0, 0.6);
    
    /* Form Controls */
    --input-bg: #ffffff;
    --input-border: #e0e0e0;
    --input-text: #333333;
    --input-placeholder: #999999;
    --input-focus-border: #667eea;
    --input-focus-shadow: rgba(102, 126, 234, 0.1);
    
    /* Interactive Elements */
    --hover-bg: #f8f8f8;
    --active-bg: #f0f0f0;
    
    /* Semantic Colors */
    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-error: #f44336;
    --color-info: #2196f3;
    
    /* Brand Colors */
    --color-primary: #FF6B35;
    --color-accent: #667eea;
}

/* Dark Theme */
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-surface: #0f3460;
    --bg-overlay: rgba(0, 0, 0, 0.8);
    
    /* Text Colors */
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;
    --text-inverse: #1a1a2e;
    
    /* Border Colors */
    --border-light: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.2);
    --border-dark: rgba(255, 255, 255, 0.3);
    
    /* Modal Specific */
    --modal-bg: #2a2a3e;
    --modal-overlay: rgba(0, 0, 0, 0.85);
    
    /* Form Controls */
    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: rgba(255, 255, 255, 0.15);
    --input-text: #ffffff;
    --input-placeholder: rgba(255, 255, 255, 0.4);
    --input-focus-border: #667eea;
    --input-focus-shadow: rgba(102, 126, 234, 0.3);
    
    /* Interactive Elements */
    --hover-bg: rgba(255, 255, 255, 0.1);
    --active-bg: rgba(255, 255, 255, 0.15);
    
    /* Semantic Colors (keep same for consistency) */
    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-error: #f44336;
    --color-info: #2196f3;
    
    /* Brand Colors (keep same) */
    --color-primary: #FF6B35;
    --color-accent: #667eea;
}

/* ============================================
   BASE STYLES & LAYOUT
   ============================================ */

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    overflow: hidden;
    background: var(--bg-primary);
    color: var(--text-primary);
}