/* Component: Base Layout and Scrollbar Styles
 * Description: This stylesheet defines the foundational layout, color variables, font settings,
 *              and custom scrollbar styles 
 *              for the application. It includes responsive adjustments for various device sizes (mobile, tablet, landscape), 
 *              and touch-friendly scrollbar modifications. The main layout uses a blurred backdrop and adapts spacing and 
 *              typography for different screen widths. Scrollbars are visually customized and include SVG icons for buttons.
 */

 
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --color-branding-primary: #CC0000;
    --color-branding-secondary: #E68A00;

    --color-branding-verified: #34A843;

    --color-mediumslateblue: mediumslateblue;
    --color-darkslateblue: darkslateblue;
    --color-lightblue: #0066FF;
    --color-blue: blue;

    --color-background-primary: #242729;
    --color-background-deep: #121212;
    --color-background-lighter: #3e4245;
    --color-background-bright: #c2c4c5;
    --color-background-medium: #282a2c;
    --color-background-dark: rgb(27, 27, 27);

    --smd-header--primary: #0000;
    --smd-header--shadow: rgba(0,0,0,0.25);
    --smd-header--inset: rgba(255,255,255,0.15);
    --smd-header--background-overlay: rgba(0, 0, 0, 0.1);
    --smd-header--after-shadow: 0 6px 6px rgba(0,0,0,0.2), 0 0 20px rgba(0,0,0,0.1);
    --smd-header--floating-border: rgba(255, 255, 255, 0.082);

    --color-scrollbar-track: #333;
    --color-scrollbar-thumb: #555;
    --color-scrollbar-thumb-hover: #777;
    --color-scrollbar-button-hover: #444;

    --gradient-one: conic-gradient(#ff0000, #ff9900, #ff0000, #ff0000, #ff9900, #ff0000);

    --font-family-primary: "Poppins", sans-serif;
}

.smd-layout_main {
    margin-top: 64px;
    padding: 20px;
    backdrop-filter: blur(10px);
    color: white;
}

.smd-layout_body {
    background-color: var(--color-background-primary);
    font-family: var(--font-family-primary);
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar-thumb);
    border-radius: 0px;
    border: 2px solid var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-scrollbar-thumb-hover);
}

::-webkit-scrollbar-button {
    background-color: var(--color-scrollbar-track);
    height: 12px;
}

::-webkit-scrollbar-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23555'%3E%3Cpath d='M6 8l4-4H2z'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23555'%3E%3Cpath d='M2 8l4-4 4 4z'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:hover {
    background-color: var(--color-scrollbar-button-hover);
}


@media screen and (max-width: 768px) {
    .smd-layout_main {
        margin-top: 56px; 
        padding: 16px;
    }
    
    .container {
        padding: 0 16px;
    }
    
    h1 {
        font-size: 24px;
    }
    
    h2 {
        font-size: 20px;
    }
    
    h3 {
        font-size: 18px;
    }
    
    p {
        font-size: 14px;
        line-height: 1.6;
    }
}

@media screen and (max-width: 480px) {
    .smd-layout_main {
        margin-top: 56px;
        padding: 12px;
    }
    
    .container {
        padding: 0 12px;
    }
    
    h1 {
        font-size: 22px;
    }
    
    h2 {
        font-size: 18px;
    }
    
    p {
        font-size: 13px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .smd-layout_main {
        padding: 24px;
    }
    
    .container {
        padding: 0 24px;
    }
}

@media screen and (max-height: 480px) and (orientation: landscape) {
    .smd-layout_main {
        margin-top: 48px;
        padding: 12px;
    }
}

@media (hover: none) and (pointer: coarse) {
    ::-webkit-scrollbar {
        width: 8px;
    }
    
    ::-webkit-scrollbar-thumb {
        background-color: var(--color-scrollbar-thumb);
        border-radius: 4px;
    }
}