:root {
    /* Colors */
    --primary-color: #0066cc;
    --primary-hover: #0052a3;
    --secondary-color: #455a64;
    --background-color: #f5f5f5;
    --surface-color: #ffffff;
    --error-color: #dc2626;
    --success-color: #388e3c;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --border-color: #e5e5e5;
    
    /* Widget specific colors */
    --widget-bg: var(--surface-color);
    --widget-border: var(--border-color);
    --widget-handle: #94a3b8;
    --widget-placeholder: #f7fafc;
    --widget-drag-target: #3b82f6;
    --widget-error: #f56565;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Layout */
    --sidebar-width: 200px;
    --border-radius: 12px;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #1a1a1a;
        --surface-color: #2d2d2d;
        --surface-hover: #353535;
        --text-primary: #ffffff;
        --text-secondary: #a0a0a0;
        --border-color: #404040;
        --primary-color: #2196f3;
        --primary-hover: #1976d2;
        
        /* Widget dark theme adjustments */
        --widget-bg: var(--surface-color);
        --widget-border: var(--border-color);
        --widget-handle: #64748b;
        --widget-placeholder: #1e293b;
        --widget-drag-target: #3b82f6;
    }
}

/* Reset and base styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--background-color);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
}