:root {
    /* === KELEV CONTROL DESIGN SYSTEM === */
    
    /* Dark Theme */
    --bg-primary: #0a0e17;
    --bg-secondary: #111827;
    --bg-tertiary: #1a2332;
    --bg-card: #151f2e;
    --bg-card-hover: #1c2a3d;
    --bg-input: #0d1420;
    
    /* Borders */
    --border-primary: #1e293b;
    --border-hover: #334155;
    --border-active: #f59e0b44;
    
    /* Brand Colors */
    --amber: #f59e0b;
    --amber-light: #fbbf24;
    --amber-dark: #d97706;
    --amber-glow: rgba(245, 158, 11, 0.15);
    --amber-glow-strong: rgba(245, 158, 11, 0.3);
    
    --emerald: #10b981;
    --emerald-light: #34d399;
    --emerald-dark: #059669;
    --emerald-glow: rgba(16, 185, 129, 0.15);
    
    --red: #ef4444;
    --red-light: #f87171;
    --red-glow: rgba(239, 68, 68, 0.15);
    
    --blue: #3b82f6;
    --blue-light: #60a5fa;
    --blue-glow: rgba(59, 130, 246, 0.15);
    
    --purple: #8b5cf6;
    --purple-glow: rgba(139, 92, 246, 0.15);
    
    /* Text */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #0a0e17;
    
    /* Sizing */
    --sidebar-width: 280px;
    --sidebar-collapsed: 72px;
    --header-height: 64px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
    --shadow-glow-amber: 0 0 20px rgba(245, 158, 11, 0.2);
    --shadow-glow-emerald: 0 0 20px rgba(16, 185, 129, 0.2);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    
    /* Z-Index Scale */
    --z-sidebar: 100;
    --z-header: 90;
    --z-modal: 200;
    --z-toast: 300;
    --z-tooltip: 250;
}

/* === RESET & BASE === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow: hidden;
    height: 100vh;
}

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--amber-light); }

img { max-width: 100%; display: block; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { 
    background: var(--border-primary); 
    border-radius: 3px; 
}
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }