/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

body {
    font-family: "Poppins", sans-serif;
}

.font-sans {
    font-family: "Poppins", sans-serif;
}

::selection {
    background-color: #47a3f3;
    color: #fefefe;
}

/* Scrollbar styling - prevents layout shifts and maintains accessibility */
html {
    scrollbar-gutter: stable;
    min-width: 360px;
}

/* Custom scrollbar styling for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #a3a3a3;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #737373;
}

/* Dark mode scrollbar */
@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-thumb {
        background: #525252;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #737373;
    }
}

/* Firefox scrollbar styling */
html {
    scrollbar-width: thin;
    scrollbar-color: #a3a3a3 transparent;
}

@media (prefers-color-scheme: dark) {
    html {
        scrollbar-color: #525252 transparent;
    }
}

:root {
    --sh-class: #2d5e9d;
    --sh-identifier: #354150;
    --sh-sign: #8996a3;
    --sh-string: #007f7a;
    --sh-keyword: #e02518;
    --sh-comment: #a19595;
    --sh-jsxliterals: #6266d1;
    --sh-property: #e25a1c;
    --sh-entity: #e25a1c;
}

@media (prefers-color-scheme: dark) {
    :root {
        --sh-class: #4c97f8;
        --sh-identifier: white;
        --sh-keyword: #f47067;
        --sh-string: #0fa295;
    }
    html {
        color-scheme: dark;
    }
}

/* Dark Blue Gradient Background with Mouse Hover Effect */
body {
    position: relative;
    background: linear-gradient(135deg, #0a0f1e 0%, #152a4a 50%, #0a0f1e 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(59, 130, 246, 0.05),
        transparent 50%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

body.mouse-active::before {
    opacity: 1;
}

body > * {
    position: relative;
    z-index: 1;
}