/* Globalne style */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

/* ============ Light Mode ============ */
html.light-mode {
    /* Odwrocenie skali kolorow slate */
    --color-slate-50: oklch(0.129 0.042 264.695);
    --color-slate-100: oklch(0.208 0.042 265.755);
    --color-slate-200: oklch(0.279 0.041 260.031);
    --color-slate-300: oklch(0.372 0.044 257.287);
    --color-slate-400: oklch(0.446 0.043 257.281);
    --color-slate-500: oklch(0.554 0.046 257.417);
    --color-slate-600: oklch(0.704 0.04 256.788);
    --color-slate-700: oklch(0.869 0.022 252.894);
    --color-slate-800: oklch(0.929 0.013 255.508);
    --color-slate-900: oklch(0.968 0.007 247.896);
    --color-slate-950: oklch(0.984 0.003 247.858);

    /* Bialy tekst staje sie ciemny */
    --color-white: oklch(0.129 0.042 264.695);
}

/* Zachowaj bialy tekst na kolorowych tlach */
html.light-mode .bg-gradient-to-r,
html.light-mode .bg-blue-500 {
    --color-white: #fff;
}

/* Tranzycja przy zmianie motywu */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ============ Scroll to top ============ */
#scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 40;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    font-size: 1rem;
}

#scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

#scroll-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}