styles.css

/* =========================================================== */
/* ARQUIVO PRINCIPAL DE ESTILOS                                */
/* =========================================================== */
/* Este arquivo centraliza a importação de todos os outros     */
/* arquivos CSS, garantindo a ordem correta de cascata.        */
/* Ordem: Componentes -> Seções -> Animações -> Responsividade */
/* =========================================================== */

/* 1. Importa os estilos da barra de navegação. */
@import url('./css/navigation.css');

/* 2. Importa o layout das seções principais da página. */
@import url('./css/sections.css');

/* 3. Importa os estilos de componentes reutilizáveis como cards e formulários. */
@import url('./css/components.css');

/* 4. Importa as animações e efeitos especiais. */
@import url('./css/animations.css');

/* 5. Importa todos os estilos responsivos. */
@import url('./css/responsive.css');

/* ======================================================= */
/* Estilos Globais e Variáveis                             */
/* ======================================================= */

/* Seletor universal para aplicar um reset básico de margens e preenchimentos. */
* {
    margin: 0; /* Remove a margem externa de todos os elementos. */
    padding: 0; /* Remove o preenchimento interno de todos os elementos. */
    box-sizing: border-box; /* Garante que padding e border não aumentem o tamanho final do elemento. */
    font-family: Verdana, Geneva, Tahoma, sans-serif; /* Define a família de fontes padrão para todo o site. */
}

/* Define estilos para o elemento raiz do documento. */
html {
    scroll-behavior: smooth; /* Habilita a rolagem suave ao clicar em links de âncora (ex: href="#sobre"). */
}

/* Bloco :root para definir variáveis CSS globais, facilitando a manutenção do tema. */
:root{
    --primaria: #2a1fee;       /* Cor primária principal, usada para destaques. */
    --secundaria: #5076f1;     /* Cor secundária, usada para links e gradientes. */
    --escuro: #0f172a;         /* Cor de fundo principal, um azul bem escuro. */
    --maisEscuro: #0a0f1c;     /* Tom ainda mais escuro, para fundos com gradiente. */
    --claro: #e2e8f0;          /* Cor clara principal, usada para textos. */
    --vidro: rgba(255, 255, 255, 0.1); /* Cor para bordas e fundos com efeito de vidro. */
    --menu: rgba(15, 23, 42, 0.8);   /* Cor de fundo para o menu, com transparência. */
    --sombra: rgba(79, 70, 229, 0.3); /* Cor para sombras, baseada na cor primária. */
    --filtro: rgba(255, 255, 255, 0.05); /* Cor de filtro sutil para fundos de caixas. */
}

/* Estilos aplicados ao corpo do documento. */
body {
    background-color: var(--escuro); /* Define a cor de fundo usando a variável --escuro. */
    color: var(--claro); /* Define a cor padrão do texto usando a variável --claro. */
}

/* Estilos para o título principal h1. */
h1 {
    font-size: 2.5rem; /* Define o tamanho da fonte. */
    color: var(--primaria); /* Define a cor do texto usando a variável --primaria. */
    font-weight: bold; /* Define a espessura da fonte como negrito. */
    margin: 20px; /* Adiciona uma margem externa. */
}

/* Estilos globais para todos os links (tags <a>). */
a {
    text-decoration: none; /* Remove o sublinhado padrão dos links. */
    cursor: pointer; /* Garante que o cursor mude para uma mãozinha ao passar sobre o link. */
}