:root {
    /* Colors - Tech Dark Theme */
    --bg-main: #060913;
    --bg-surface: #0a0f1c;
    --bg-surface-light: #121a2f;
    --bg-surface-hover: #1a2542;
    
    --text-main: #f8f9fa;
    --text-muted: #94a3b8;
    
    /* Accent - Tech Violet/Blue */
    --primary: #4f46e5;
    --primary-hover: #6366f1;
    --primary-light: rgba(99, 102, 241, 0.15);
    --secondary: #0ea5e9;
    
    --success: #10b981;
    --error: #ef4444;
    
    /* Borders */
    --border-color: #1e293b;
    --border-light: rgba(255, 255, 255, 0.05);

    /* Typography */
    /* Modern system font stack for max performance */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 1rem;
    --spacing-4: 1.5rem;
    --spacing-5: 2rem;
    --spacing-6: 3rem;
    --spacing-8: 4rem;
    --spacing-12: 6rem;
    --spacing-16: 8rem;
    
    /* Layout */
    --container-width: 1200px;
    --container-padding: 1.5rem;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
}