/* ======================================================
   RSTOCK - SISTEMA GLOBAL DE TEMAS
====================================================== */


/* ======================================================
   ROXO NEON - PADRÃO
====================================================== */

:root {

    --fundo-1: #4b006e;
    --fundo-2: #2c003e;
    --fundo-3: #1a0026;
    --fundo-4: #100016;

    --card-1: #21002f;
    --card-2: #160020;
    --card-hover: #320047;

    --principal: #7b2cbf;
    --destaque: #00ff7f;

    --principal-rgb: 123,44,191;
    --destaque-rgb: 0,255,127;
}


/* ======================================================
   AZUL ELÉTRICO
====================================================== */

body.tema-azul {

    --fundo-1: #003b66;
    --fundo-2: #002844;
    --fundo-3: #001827;
    --fundo-4: #000d16;

    --card-1: #00263d;
    --card-2: #001522;
    --card-hover: #003b5e;

    --principal: #008cff;
    --destaque: #00eaff;

    --principal-rgb: 0,140,255;
    --destaque-rgb: 0,234,255;
}


/* ======================================================
   VERDE MATRIX
====================================================== */

body.tema-verde {

    --fundo-1: #063d2a;
    --fundo-2: #032a1d;
    --fundo-3: #011b12;
    --fundo-4: #000e09;

    --card-1: #05291d;
    --card-2: #021810;
    --card-hover: #07462f;

    --principal: #00b86b;
    --destaque: #39ff14;

    --principal-rgb: 0,184,107;
    --destaque-rgb: 57,255,20;
}


/* ======================================================
   VERMELHO RUBI
====================================================== */

body.tema-vermelho {

    --fundo-1: #650018;
    --fundo-2: #400010;
    --fundo-3: #260009;
    --fundo-4: #120004;

    --card-1: #35000d;
    --card-2: #1c0007;
    --card-hover: #520014;

    --principal: #e0003b;
    --destaque: #ff456f;

    --principal-rgb: 224,0,59;
    --destaque-rgb: 255,69,111;
}


/* ======================================================
   FUNDO GLOBAL
====================================================== */

body {

    background:
        radial-gradient(
            circle at 50% -20%,
            var(--fundo-1) 0%,
            var(--fundo-2) 32%,
            var(--fundo-3) 70%,
            var(--fundo-4) 100%
        );

    background-attachment: fixed;

    transition:
        background .5s ease;
}


/* ======================================================
   SELETOR DE TEMA
====================================================== */

.seletor-tema {

    position: fixed;

    top: 18px;
    right: 18px;

    z-index: 9999;
}


.btn-tema {

    width: 48px;
    height: 48px;

    display: flex;

    justify-content: center;
    align-items: center;

    border-radius: 50%;

    border:
        2px solid var(--principal);

    background:
        rgba(10,10,15,.88);

    color: white;

    font-size: 21px;

    cursor: pointer;

    box-shadow:
        0 0 12px
        rgba(var(--principal-rgb), .55);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.btn-tema:hover {

    transform:
        rotate(20deg)
        scale(1.1);

    border-color:
        var(--destaque);

    box-shadow:
        0 0 18px
        rgba(var(--destaque-rgb), .65);
}


.menu-temas {

    position: absolute;

    top: 58px;
    right: 0;

    display: none;

    gap: 10px;

    padding: 12px;

    background:
        rgba(10,10,15,.94);

    border-radius: 15px;

    border:
        1px solid rgba(255,255,255,.15);

    box-shadow:
        0 8px 25px rgba(0,0,0,.55);

    backdrop-filter:
        blur(8px);
}


.menu-temas.aberto {

    display: flex;

    animation:
        abrirMenuTema .25s ease;
}


@keyframes abrirMenuTema {

    from {

        opacity: 0;

        transform:
            translateY(-8px)
            scale(.9);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


.cor-tema {

    width: 29px;
    height: 29px;

    border-radius: 50%;

    border:
        2px solid rgba(255,255,255,.65);

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.cor-tema:hover {

    transform:
        scale(1.22);

    border-color: white;
}


.cor-tema.ativo {

    border-color: white;

    box-shadow:
        0 0 0 2px #111,
        0 0 0 4px white;
}


.cor-tema.roxo {
    background:#7b2cbf;
}

.cor-tema.azul {
    background:#008cff;
}

.cor-tema.verde {
    background:#00b86b;
}

.cor-tema.vermelho {
    background:#e0003b;
}


@media (max-width: 600px) {

    .seletor-tema {

        top: 12px;
        right: 12px;
    }

}