/****************************************************************************************************
 * Nome do Arquivo: root.css
 * Caminho do Arquivo: assets/style/general/root.css
 * 
 * Objetivo:
 * Esse Arquivo Guarda a Estrutura Central de Cores e Variáveis (:root) de Todo o Site.
 * Centraliza os tokens de layout, containers, botões, inputs e das telas fullpage.
 ****************************************************************************************************/

:root {
    /* ==========================================================================
       1. CONFIGURAÇÃO PRINCIPAL DE COR E FUNDO
       ========================================================================== */
    --cor_principal_funco_body: rgb(0, 0, 0);

    /* ==========================================================================
       2. CONFIGURAÇÃO DA VARIÁVEIS QUE GUARDAM A POSIÇÃO ATUAL DO MOUSE (mouse-tracker.js)
       ========================================================================== */
    --angulo_X: -800px;
    --angulo_Y: -800px;

    /* ==========================================================================
       3. CONFIGURAÇÕES GERAIS DA CLASSE .container
       ========================================================================== */
    --container_background-color: rgb(0, 14, 32);
    --container_border: 2px solid rgb(0, 64, 133);
    --container_border-radius: 8px;
    --container_box-shadow: 0 0 20px rgb(0, 95, 196);

    /* ==========================================================================
       4. CONFIGURAÇÕES GERAIS DA CLASSE .container_main
       ========================================================================== */
    --container_max-width: 90%;
    --container_max-width_mobile: 95%;
    --container_margin: 30px auto;
    --container_margin_mobile: 15px auto;
    --container_padding: 20px;
    --container_padding_mobile: 10px;
    --container_box-sizing: border-box;

    /* ==========================================================================
       5. CONFIGURAÇÕES DA TELA DE MANUTENÇÃO (style_maintenance.css)
       ========================================================================== */
    --manutencao_badge_border: 2px solid rgb(0, 67, 139);
    --manutencao_badge_border-radius: 30px;
    --manutencao_badge_box-shadow: 0 0 20px rgb(0, 123, 255);
    --manutencao_badge_bg: rgba(0, 20, 50, 0.6);

    /* ==========================================================================
       6. CONFIGURAÇÕES DA TELA DE LOGIN (style_login.css)
       ========================================================================== */
    --login_border: 2px solid rgb(0, 67, 139);
    --login_border_focus: 2px solid rgb(0, 123, 255);
    --login_box-shadow: 0 0 25px rgba(0, 123, 255, 0.45);
    --login_box-shadow_hover: 0 0 35px rgba(0, 140, 255, 0.65);
    --login_border-radius: 22px;
    --login_card_bg: rgba(0, 18, 42, 0.65);

    /* ==========================================================================
       7. CONFIGURAÇÕES DA TELA DE RECUPERAR SENHA (style_forgot_password.css)
       ========================================================================== */
    --forgot_border: 2px solid rgb(0, 67, 139);
    --forgot_border_focus: 2px solid rgb(0, 123, 255);
    --forgot_box-shadow: 0 0 25px rgba(0, 123, 255, 0.45);
    --forgot_box-shadow_hover: 0 0 35px rgba(0, 140, 255, 0.65);
    --forgot_border-radius: 22px;
    --forgot_card_bg: rgba(0, 18, 42, 0.65);

    /* ==========================================================================
       8. CONFIGURAÇÕES DA TELA DE CRIAR NOVA SENHA (style_new_password.css)
       ========================================================================== */
    --newpass_border: 2px solid rgb(0, 67, 139);
    --newpass_border_focus: 2px solid rgb(0, 123, 255);
    --newpass_box-shadow: 0 0 25px rgba(0, 123, 255, 0.45);
    --newpass_box-shadow_hover: 0 0 35px rgba(0, 140, 255, 0.65);
    --newpass_border-radius: 22px;
    --newpass_card_bg: rgba(0, 18, 42, 0.65);

    /* ==========================================================================
       9. CONFIGURAÇÕES GERAIS DE FORMULÁRIOS, INPUTS E LABELS
       ========================================================================== */
    --input_bg: rgba(0, 10, 24, 0.75);
    --input_border: 1.5px solid rgb(0, 67, 139);
    --input_border_focus: 2px solid rgb(0, 123, 255);
    --input_box-shadow_focus: 0 0 15px rgba(0, 123, 255, 0.6);
    --input_color: #ffffff;
    --input_placeholder_color: #64748b;
    --label_color: #ffffff;

    /* ==========================================================================
       10. CONFIGURAÇÕES GERAIS DOS BOTÕES
       ========================================================================== */
    --btn_login_bg: linear-gradient(135deg, rgb(0, 89, 184) 0%, rgb(0, 123, 255) 100%);
    --btn_login_bg_hover: linear-gradient(135deg, rgb(0, 100, 210) 0%, rgb(0, 150, 255) 100%);
    --btn_login_border: 1px solid rgb(0, 123, 255);
    --btn_login_box-shadow: 0 0 18px rgba(0, 123, 255, 0.45);
    --btn_login_box-shadow_hover: 0 0 28px rgba(0, 123, 255, 0.85);

    --btn_voltar_color: #92c7ff;
    --btn_voltar_border: 1px solid rgb(0, 67, 139);
    --btn_voltar_bg_hover: rgba(0, 67, 139, 0.25);
}

/* ==========================================================================
   RESET GLOBAL E TIPOGRAFIA PADRÃO
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/* Configuração do Body */
body {
    background-color: var(--cor_principal_funco_body);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Efeito do Fundo Estático (Bolinhas cinzas de 1px) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: radial-gradient(rgb(61, 61, 61) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Efeito do Fundo Dinâmico com o Mouse (Bolinhas azuis de 2px iluminadas no cursor) */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(rgb(0, 110, 255) 2px, transparent 2px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(250px circle at var(--angulo_X) var(--angulo_Y), rgb(0, 0, 0), transparent);
    mask-image: radial-gradient(250px circle at var(--angulo_X) var(--angulo_Y), rgb(0, 0, 0), transparent);
}

/* Container Main do Conteúdo */
main {
    flex: 1;
    width: 100%;
}