/* --- VARIABLES --- */
:root {
/*
    --body-bg: #faf7ff;
    --body-bg-img: url('/images/background.png');
    --body-bg-shadow: inset 0 0px 0px var(--body-bg);

    --text-normal-color: #000;
    --text-secondary-color: #272727;
    --text-faded-color: #6c6c6c;
    --text-inversed-color: #f5f5f5;

    --header-bg: #ffffff;

    --card-bg: #ffffff;

    --glow-color: #000;

    --bg-semi-transparent: rgba(255, 255, 255, 0.7);
    --bg-almost-transparent: rgba(255, 255, 255, 0.7);
*/
    --body-bg: rgb(8, 7, 11);
    --body-bg-img: url('/images/background.png');
    --body-bg-shadow: inset 0 -50px 50px var(--body-bg);

    --text-normal-color: #f5f5f5;
    --text-secondary-color: #c3c3c3;
    --text-faded-color: #6c6c6c;
    --text-inversed-color: #000;

    --header-bg: rgb(18, 17, 21);
    --header-main-font-color: rgb(238, 237, 241);
    --header-secondary-font-color: rgb(178, 177, 181);

    --card-bg: rgb(22, 21, 25);

    --bg-semi-transparent: rgba(22, 21, 25, 0.8);
    --bg-almost-transparent: rgba(22, 21, 25, 0.4);

    --button-main-bg: #6a4bff;

    --glow-color: rgba(100, 100, 100, 0.3);

    --button-bg: rgb(18, 17, 21);


    --gradient-primary: linear-gradient(
            90deg,
            #6a4bff 0%,
            #885bff 50%,
            #b090ff 75%,
            #d4b8ff 100%
    );

    --star-yellow: #fbc02d;
    --shadow-inset: inset 0px 3px 14px rgba(255, 255, 255, 0.2);
}

@media (prefers-color-scheme: dark) {
    :root {
        --body-bg: rgb(8, 7, 11);
        --body-bg-img: url('/images/background.png');
        --body-bg-shadow: inset 0 -50px 50px var(--body-bg);

        --text-normal-color: #f5f5f5;
        --text-secondary-color: #c3c3c3;
        --text-faded-color: #6c6c6c;
        --text-inversed-color: #000;

        --header-bg: rgb(18, 17, 21);
        --header-main-font-color: rgb(238, 237, 241);
        --header-secondary-font-color: rgb(178, 177, 181);

        --card-bg: rgb(22, 21, 25);

        --bg-semi-transparent: rgba(22, 21, 25, 0.8);
        --bg-almost-transparent: rgba(22, 21, 25, 0.4);

        --button-main-bg: #6a4bff;

        --glow-color: rgba(100, 100, 100, 0.3);
    }
}

/* --- RESET --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: var(--body-bg);
    font-family: "Inter", sans-serif;
    color: var(--text-normal-color);
    -webkit-font-smoothing: antialiased;
    padding-top: 80px; /* Desktop padding */
}
.body-background-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 700px;
    background-size: cover;
    background-position: center;
    box-shadow: var(--body-bg-shadow);
    background-image: var(--body-bg-img);
}
a {
    text-decoration: none;
    color: inherit;
}
button {
    border: none;
    background: none;
    cursor: pointer;
}

.header-text-color {
    color: var(--header-main-font-color);
}
.header-text-color2 {
    color: var(--header-secondary-font-color);
}

/* --- TYPOGRAPHY --- */
.font-sora {
    font-family: "Sora", sans-serif;
}
.font-space {
    font-family: "Space Grotesk", sans-serif;
}
.font-poppins {
    font-family: "Poppins", sans-serif;
}
.font-satoshi {
    font-family: "Outfit", sans-serif;
}
.font-inter {
    font-family: "Inter", sans-serif;
}

.text-yellow {
    color: var(--star-yellow);
}

/* --- DESKTOP HEADER --- */
header {
    background: var(--header-bg);
}


.logo-group {
    display: flex;
    align-items: center;
    gap: 12px;
}
.logo-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    box-shadow: var(--shadow-inset);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: 700;
}
.logo-text h3 {
    font-size: 16px;
    color: var(--header-main-font-color);
    margin-bottom: 2px;
}
.logo-text p {
    font-size: 10px;
    color: var(--header-main-font-color);
    opacity: 0.8;
}
.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eee
    url("/images/avatar.png")
    center/cover;
}
.user-name {
    font-weight: 600;
    font-size: 14px;
}

.btn-logout {
    background: #1a1a1a;
    box-shadow: var(--shadow-inset);
    border-radius: 8px;
    color: white;
    padding: 8px 16px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.text-normal-color {
    color: var(--text-normal-color);
}

.text-secondary-color {
    color: var(--text-secondary-color);
}

.text-inversed-color {
    color: var(--text-inversed-color);
}

.text-faded-color {
    color: var(--text-faded-color);
}

.border-normal-color {
    border-color: var(--text-normal-color);
}

.background-normal-color {
    background: var(--card-bg);
}

.background-semi-transparent {
    background: var(--bg-semi-transparent);
}

.background-almost-transparent {
    background: var(--bg-almost-transparent);
}

.shadow-almost-transparent {
    box-shadow: 0 0 1rem 1rem var(--bg-almost-transparent);
}

.glow {
    box-shadow: 0 0 1rem var(--glow-color);
}

.button-bg {
    background: var(--button-bg);
}

.button-main-bg {
    background: var(--button-main-bg);
}