@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@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');

/* ==================================================
    RESET CSS
   ================================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Garante que o padding e a borda não aumentem o tamanho da caixa */
    text-decoration: none;
    list-style: none;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-weight: 400;
}


/* Configurações básicas do corpo */
html {
    scroll-behavior: smooth;
    /* Rolagem suave para âncoras */
    font-size: 100%;
    /* Respeita o tamanho de fonte do navegador do usuário */
}

body {
    min-height: 100vh;
    /* Garante que o corpo ocupe pelo menos a tela toda */
    line-height: 1.6;
    /* Melhora a leitura do texto */
    -webkit-font-smoothing: antialiased;
    /* Deixa as fontes mais nítidas no Mac/iOS */
}

/* Imagens e Mídia Responsiva */
img,
picture,
video,
canvas,
svg {
    display: block;
    /* Remove o espaço em branco estranho abaixo das imagens */
    max-width: 100%;
    /* Garante que a imagem nunca estoure o contêiner */
}

/* Inputs e Botões herdam a fonte do site (por padrão eles não herdam) */
input,
button,
textarea,
select {
    font: inherit;
}

/* Remove a formatação padrão de listas (bolinhas) */
ul,
ol {
    list-style: none;
}

/* Remove a formatação padrão de links (azul e sublinhado) */
a {
    text-decoration: none;
    color: inherit;
    /* Herda a cor do elemento pai */
}

/* ==================================================
    LÓGICA DE CARREGAMENTO DA PÁGINA
   ================================================== */

/* Esconde o corpo da página inicialmente */
body.invisible {
    opacity: 0;
}

/* Classe que o JS vai injetar para mostrar o site suavemente */
body.visible {
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

/* ==================================================
    SISTEMA DE CORES GLOBAIS
   ================================================== */

:root {
    /* Tema Color Orange */
    --accent-color: #f78166;
    --hover-color: #f85149;
}

html.color-mode {
    /* Tema Color Blue */
    --accent-color: #58a6ff;
    --hover-color: #1f6feb;
}

/* --- Tema Dark --- */
:root {
    --bg-primary: #0d1117;
    --bg-secondary: #21262d;
    --bg-tertiary: #161b22;

    --text-primary: #f0f6fc;
    --text-secondary: #c9d1d9;
    --text-tertiary: #8a939e;

    --shadow: rgba(1, 4, 9, 0.8);
    --shadow-light-dark: rgba(1, 4, 9, 0.8);
    --box-shadow: 0 0 20px rgba(75, 75, 160, 0.3);
}

/* --- Tema Light --- */
html.light-mode {
    --bg-primary: #fff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #fbf9ff;

    --text-primary: #24242f;
    --text-secondary: #57606a;
    --text-tertiary: #6e7781;

    --shadow: rgba(27, 31, 36, 0.15);
    --shadow-light-dark: rgba(27, 31, 36, 0.15);
    --box-shadow: 0 0 20px rgba(6, 6, 60, 0.4);
}

:root {
    /* --- Cores de Sucesso, Aviso e Erro --- */
    --text-btn: #fff;
    --input: #eee;
    --text-input: #333;
    --success-color: #3fb950;
    --warning-color: #d29922;
    --error-color: #f85149;
    /* --- Bordas --- */
    --border-radius-btn: 6px;
    --border-radius-base: 10px;
}