/**
 * Base styles and CSS theme variables
 */

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Theme Variables - Dark Theme (Default) */
body {
    /* Background Colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --bg-tertiary: #222222;
    --bg-canvas: #0a0a0a;
    --bg-input: #1a1a1a;
    --bg-button: #2a2a2a;
    --bg-button-hover: #333333;
    --bg-button-active: #252525;
    --bg-panel: rgba(42, 42, 42, 0.95);
    --bg-panel-header: rgba(26, 26, 26, 0.98);
    --bg-dropdown: rgba(26, 26, 26, 0.98);
    --bg-timeline: #222222;
    --bg-loading: rgba(0, 0, 0, 0.6);
    
    /* Text Colors */
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-tertiary: #a0a0a0;
    --text-heading: #ffffff;
    --text-muted: #808080;
    --text-disabled: #606060;
    --text-input: #e0e0e0;
    --text-button: #e0e0e0;
    --text-button-hover: #ffffff;
    --text-loading: #aaaaaa;
    
    /* Border Colors */
    --border-primary: #3a3a3a;
    --border-secondary: #4a4a4a;
    --border-hover: #4a9eff;
    --border-focus: #4a9eff;
    --border-divider: #2a2a2a;
    
    /* Accent Colors */
    --accent-primary: #4a9eff;
    --accent-hover: #3a8eef;
    --accent-active: #2a7edf;
    --accent-secondary: #ff6b35;
    
    /* Scrollbar Colors */
    --scrollbar-track: #1a1a1a;
    --scrollbar-thumb: #4a4a4a;
    --scrollbar-thumb-hover: #5a5a5a;
    --scrollbar-thumb-active: #6a6a6a;
    
    /* Shadow Colors */
    --shadow-light: rgba(0, 0, 0, 0.2);
    --shadow-medium: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.5);
    
    /* Overlay Colors */
    --overlay-panel: rgba(42, 42, 42, 0.95);
    --overlay-dropdown: rgba(26, 26, 26, 0.98);
    --overlay-tooltip: rgba(42, 42, 42, 0.98);
    
    /* Component Specific Colors */
    --checkbox-bg: #1a1a1a;
    --checkbox-border: #4a4a4a;
    --checkbox-hover-bg: #252525;
    --info-icon-bg: #3a3a3a;
    --info-icon-color: #b0b0b0;
    
    /* Gradient Buttons */
    --gradient-primary-start: #4a9eff;
    --gradient-primary-end: #3a7edf;
    --gradient-secondary-start: #555555;
    --gradient-secondary-end: #444444;
}

/* Light Theme */
body[data-theme="light"] {
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #f9f9f9;
    --bg-canvas: #fafafa;
    --bg-input: #ffffff;
    --bg-button: #ffffff;
    --bg-button-hover: #f0f0f0;
    --bg-button-active: #e8e8e8;
    --bg-panel: rgba(255, 255, 255, 0.95);
    --bg-panel-header: rgba(245, 245, 245, 0.98);
    --bg-dropdown: rgba(255, 255, 255, 0.98);
    --bg-timeline: #f9f9f9;
    --bg-loading: rgba(255, 255, 255, 0.9);
    
    /* Text Colors */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-tertiary: #777777;
    --text-heading: #1a1a1a;
    --text-muted: #999999;
    --text-disabled: #cccccc;
    --text-input: #333333;
    --text-button: #333333;
    --text-button-hover: #1a1a1a;
    --text-loading: #666666;
    
    /* Border Colors */
    --border-primary: #e0e0e0;
    --border-secondary: #d0d0d0;
    --border-hover: #4a9eff;
    --border-focus: #4a9eff;
    --border-divider: #f0f0f0;
    
    /* Accent Colors (same as dark) */
    --accent-primary: #4a9eff;
    --accent-hover: #3a8eef;
    --accent-active: #2a7edf;
    --accent-secondary: #ff6b35;
    
    /* Scrollbar Colors */
    --scrollbar-track: #ffffff;
    --scrollbar-thumb: #c0c0c0;
    --scrollbar-thumb-hover: #a0a0a0;
    --scrollbar-thumb-active: #909090;
    
    /* Shadow Colors */
    --shadow-light: rgba(0, 0, 0, 0.05);
    --shadow-medium: rgba(0, 0, 0, 0.1);
    --shadow-heavy: rgba(0, 0, 0, 0.15);
    
    /* Overlay Colors */
    --overlay-panel: rgba(255, 255, 255, 0.95);
    --overlay-dropdown: rgba(255, 255, 255, 0.98);
    --overlay-tooltip: rgba(255, 255, 255, 0.98);
    
    /* Component Specific Colors */
    --checkbox-bg: #ffffff;
    --checkbox-border: #d0d0d0;
    --checkbox-hover-bg: #f8f8f8;
    --info-icon-bg: #e0e0e0;
    --info-icon-color: #666666;
    
    /* Gradient Buttons */
    --gradient-primary-start: #4a9eff;
    --gradient-primary-end: #3a7edf;
    --gradient-secondary-start: #e0e0e0;
    --gradient-secondary-end: #d0d0d0;
}

/* Body Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Container */
#container {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* Utility Classes */
.hidden {
    display: none;
}