:root {
    --po-bg-primary: #f8f9fa;           
    --po-bg-secondary: #ffffff;          
    --po-bg-tertiary: #f1f3f5;           
    --po-bg-elevated: #ffffff;           
    --po-bg-sidebar: #EBEFF4;            
    --po-bg-input: #ffffff;              
    --po-bg-hover: #e9ecef;              
    --po-bg-active: #E6F2FA;             
    --po-bg-selected: #CDE6F7;           
    --po-text-primary: #1f2937;          
    --po-text-secondary: #495057;        
    --po-text-muted: #6b7280;            
    --po-text-light: #9ca3af;            
    --po-text-inverse: #ffffff;          
    --po-border: #e5e7eb;                
    --po-border-light: #f3f4f6;          
    --po-border-dark: #d1d5db;           
    --po-border-focus: #5B9BD5;          
    --po-accent: #5B9BD5;                
    --po-accent-dark: #4178BE;           
    --po-accent-light: #7ab3e0;          
    --po-accent-soft: rgba(91, 155, 213, 0.1);  
    --po-success: #10b981;
    --po-success-bg: rgba(16, 185, 129, 0.1);
    --po-warning: #f59e0b;
    --po-warning-bg: rgba(245, 158, 11, 0.1);
    --po-danger: #ef4444;
    --po-danger-bg: rgba(239, 68, 68, 0.1);
    --po-info: #3b82f6;
    --po-info-bg: rgba(59, 130, 246, 0.1);
    --po-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --po-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --po-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --po-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --po-window-bg: #FBFBFB;
    --po-dialog-bg: linear-gradient(315deg, #ECF0F5 26.8%, #FFFFFF 64%);
    --po-ribbon-bg: #FBFBFB;
    --po-ribbon-tab-bg: #E7EAED;
    --po-scrollbar-thumb: #C4C7C5;
    --po-scrollbar-track: transparent;
    --po-icon-default: #647687;
    --po-icon-active: #5B9BD5;
    --po-overlay: rgba(0, 0, 0, 0.5);
    --po-overlay-light: rgba(0, 0, 0, 0.3);
}
html.dark-side,
[data-theme="dark"] {
    --po-bg-primary: #1a1d21;            
    --po-bg-secondary: #22262b;          
    --po-bg-tertiary: #2d3239;           
    --po-bg-elevated: #363b42;           
    --po-bg-sidebar: #1e2227;            
    --po-bg-input: #2d3239;              
    --po-bg-hover: #3a4049;              
    --po-bg-active: #3d4450;             
    --po-bg-selected: #4a5568;           
    --po-text-primary: #e6e8eb;          
    --po-text-secondary: #b0b7bf;        
    --po-text-muted: #8b949e;            
    --po-text-light: #6e7681;            
    --po-text-inverse: #1a1d21;          
    --po-border: #3a3f47;                
    --po-border-light: #2d3239;          
    --po-border-dark: #4a5058;           
    --po-border-focus: #5B9BD5;          
    --po-accent: #5B9BD5;
    --po-accent-dark: #4178BE;
    --po-accent-light: #7ab3e0;
    --po-accent-soft: rgba(91, 155, 213, 0.15);
    --po-success: #34d399;
    --po-success-bg: rgba(52, 211, 153, 0.15);
    --po-warning: #fbbf24;
    --po-warning-bg: rgba(251, 191, 36, 0.15);
    --po-danger: #f87171;
    --po-danger-bg: rgba(248, 113, 113, 0.15);
    --po-info: #60a5fa;
    --po-info-bg: rgba(96, 165, 250, 0.15);
    --po-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --po-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --po-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
    --po-shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.6);
    --po-window-bg: #22262b;
    --po-dialog-bg: linear-gradient(315deg, #1e2227 26.8%, #2d3239 64%);
    --po-ribbon-bg: #22262b;
    --po-ribbon-tab-bg: #2d3239;
    --po-scrollbar-thumb: #4a5058;
    --po-scrollbar-track: #22262b;
    --po-icon-default: #9ca3af;
    --po-icon-active: #7ab3e0;
    --po-overlay: rgba(0, 0, 0, 0.7);
    --po-overlay-light: rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}
html.dark-side *,
[data-theme="dark"] * {
    transition: background-color 0.2s ease, 
                border-color 0.2s ease, 
                color 0.2s ease,
                box-shadow 0.2s ease;
}
html.no-transition,
html.no-transition * {
    transition: none !important;
}