/* --- THEME.CSS --- */
/* Definicje kolorów dla trybu jasnego i ciemnego (MSN Style) */

:root {
    /* TRYB JASNY */
    --color-bg-main: #f3f2f1;       /* MSN Light Grey Background */
    --color-bg-panel: #ffffff;      
    --color-bg-panel-hover: #faf9f8; 
    --color-text-primary: #242424;  
    --color-text-secondary: #616161; 
    --color-text-accent: #0078d4;   /* Microsoft Blue */
    --color-border: #e1dfdd;        
    --color-input-bg: #ffffff;      
}

[data-theme='dark'] {
    /* TRYB CIEMNY */
    --color-bg-main: #121212;       /* Głębsza czerń dla lepszego kontrastu na OLED */
    --color-bg-panel: #2b2b2b;      
    --color-bg-panel-hover: #3a3a3a; 
    --color-text-primary: #ffffff;  
    --color-text-secondary: #adadad; 
    --color-text-accent: #4cc2ff;   
    --color-border: #3b3b3b;        
    --color-input-bg: #333333;      
}

/* Globalne style */
body { 
    background-color: var(--color-bg-main); 
    color: var(--color-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Zapobieganie przesuwaniu treści przy zmianie scrolla */
    overflow-y: scroll; 
    -webkit-tap-highlight-color: transparent; /* Usuwa niebieskie podświetlenie przy dotyku na mobile */
}

/* Panel */
.glass-panel {
    background-color: var(--color-bg-panel);
    border-bottom: 1px solid var(--color-border);
}

/* Ukrywanie scrollbara ale zachowanie funkcjonalności (dla paska kategorii na mobile) */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Animacje */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }

@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.animate-slide-up { animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Lepsza responsywność obrazków */
img {
    max-width: 100%;
    height: auto;
    display: block;
}