/* base/RESET.CSS */

/* Universal Box Model */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Document Root */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 68px;
    scrollbar-gutter: stable;
}

/* Body Base */
body {
    font-family: 'Poppins', sans-serif;
    font-size: var(--text-body);
    line-height: 1.6;
    color: var(--dark-gray);
    background: var(--off-white);
    overflow-x: hidden;
    opacity: 0;
    animation: fadeInPage var(--dur-slow) var(--ease-out) forwards;
}

input, button, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* Layout Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Custom Scrollbars */
@media (hover: hover) and (pointer: fine) {
    .scrollbar-y {
        scrollbar-width: thin;
        scrollbar-color: var(--light-gray) transparent;
    }

    .scrollbar-y::-webkit-scrollbar {
        width: 6px;
    }

    .scrollbar-y::-webkit-scrollbar-track {
        margin: 16px 0;
        background: transparent;
        border-radius: var(--radius-sm);
    }

    .scrollbar-y::-webkit-scrollbar-thumb {
        background: var(--light-gray);
        border-radius: var(--radius-sm);
    }

    .scrollbar-y::-webkit-scrollbar-thumb:hover {
        background: var(--medium-gray);
    }

    .scrollbar-x {
        scrollbar-width: thin;
        scrollbar-color: var(--light-gray) var(--silver-mist);
    }

    .scrollbar-x::-webkit-scrollbar {
        height: 8px;
    }

    .scrollbar-x::-webkit-scrollbar-track {
        background: var(--silver-mist);
        border-radius: var(--radius-sm);
    }

    .scrollbar-x::-webkit-scrollbar-thumb {
        background: var(--light-gray);
        border-radius: var(--radius-sm);
    }

    .scrollbar-x::-webkit-scrollbar-thumb:hover {
        background: var(--medium-gray);
    }
}

/* Responsive: Tablet */
@media (max-width: 1024px) {
    .container {
        padding: 0 10px;
    }
}

/* Responsive: Mobile */
@media (max-width: 480px) {
    .container {
        padding: 0 8px;
    }
}