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

/* Theme Variables - Dark (Default) */
:root[data-theme="dark"] {
    /* Backgrounds */
    --bg-primary: #0f0f0f;
    --bg-secondary: #171717;
    --bg-tertiary: #212121;
    --bg-hover: #2a2a2a;
    --bg-active: #323232;
    
    /* Text */
    --text-primary: #f5f5f5;
    --text-secondary: #a3a3a3;
    --text-muted: #737373;
    
    /* Borders */
    --border-primary: #2e2e2e;
    --border-secondary: #404040;
    
    /* Status */
    --status-success: #22c55e;
    --status-warning: #eab308;
    --status-error: #ef4444;
    --status-info: #3b82f6;
    
    /* Accent */
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-light: rgba(59, 130, 246, 0.1);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
}

/* Theme Variables - Light */
:root[data-theme="light"] {
    /* Backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #e5e5e5;
    --bg-hover: #d4d4d4;
    --bg-active: #c4c4c4;
    
    /* Text */
    --text-primary: #1a1a1a;
    --text-secondary: #525252;
    --text-muted: #737373;
    
    /* Borders */
    --border-primary: #e5e5e5;
    --border-secondary: #d4d4d4;
    
    /* Status */
    --status-success: #16a34a;
    --status-warning: #ca8a04;
    --status-error: #dc2626;
    --status-info: #2563eb;
    
    /* Accent */
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-light: rgba(59, 130, 246, 0.1);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
}

/* Default to dark theme */
:root {
    --bg-primary: #0f0f0f;
    --bg-secondary: #171717;
    --bg-tertiary: #212121;
    --bg-hover: #2a2a2a;
    --bg-active: #323232;
    --text-primary: #f5f5f5;
    --text-secondary: #a3a3a3;
    --text-muted: #737373;
    --border-primary: #2e2e2e;
    --border-secondary: #404040;
    --status-success: #22c55e;
    --status-warning: #eab308;
    --status-error: #ef4444;
    --status-info: #3b82f6;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-light: rgba(59, 130, 246, 0.1);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
    
    /* Spacing */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
}

/* Base Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
                 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-primary);
    overflow-x: hidden;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

code, .mono {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
}

/* Typography */
h1 { font-size: 28px; font-weight: 600; margin-bottom: 16px; }
h2 { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
h3 { font-size: 16px; font-weight: 500; margin-bottom: 8px; }

/* Utility Classes */
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--status-success); }
.text-warning { color: var(--status-warning); }
.text-error { color: var(--status-error); }