/* ==========================================================================
   FAR Manager - CSS Variables
   ========================================================================== */

:root {
    /* Colors - Dark Theme */
    --bg-primary: #1d1d1f;
    --bg-secondary: #2d2d2f;
    --bg-tertiary: #3a3a3c;
    --bg-hover: #48484a;
    --bg-active: #545456;
    
    /* Text */
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary: #6e6e73;
    
    /* Accent */
    --accent: #0a84ff;
    --accent-hover: #409cff;
    --accent-pressed: #0071e3;
    
    /* Borders */
    --border: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.15);
    
    /* Semantic */
    --success: #30d158;
    --warning: #ff9f0a;
    --danger: #ff453a;
    
    /* Layout */
    --sidebar-width: 220px;
    --toolbar-height: 52px;
    --titlebar-height: 38px;
    --statusbar-height: 28px;
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.5);
    
    /* Effects */
    --blur: blur(20px);
    --transition: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    
    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 500;
    --z-modal: 1000;
    --z-context: 2000;
    --z-toast: 3000;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 100%;
        --toolbar-height: 48px;
        --titlebar-height: 44px;
    }
}