/* ==================================== */
/* 1. VARIÁVEIS CSS: TEMA SOMBRIO/MISTÉRIO */
/* ==================================== */
:root {
    /* Cores */
    --cor-principal-escura: #121212; /* Fundo muito escuro (quase preto) - Profundidade */
    --cor-secundaria-escura: #1f1f1f; /* Elementos em destaque (cards, menus) */
    --cor-texto-principal: #e0e0e0; /* Texto claro em contraste */
    --cor-texto-secundario: #a0a0a0; /* Textos de apoio ou subtítulos */
    --cor-acento-misterio: #00bcd4; /* Azul ciano/turquesa - Acento de mistério e tecnologia */
    --cor-acento-hover: #00e5ff; /* Versão mais clara para hover/interação */
    --cor-perigo: #ff4444; /* Vermelho para erros */

    /* Fontes */
    --fonte-principal: 'Roboto', sans-serif; /* Fonte moderna e legível */
    --fonte-titulo: 'Montserrat', sans-serif; /* Fonte forte para títulos */
}

/* ==================================== */
/* 2. CSS RESET BÁSICO */
/* ==================================== */
*, *::before, *::after {
    box-sizing: border-box; /* Garante que padding e border não aumentem o tamanho do elemento */
    margin: 0;
    padding: 0;
}

/* ==================================== */
/* 3. ESTILOS GLOBAIS DE CORPO E TEXTO */
/* ==================================== */
body {
    font-family: var(--fonte-principal);
    background-color: var(--cor-principal-escura);
    color: var(--cor-texto-principal);
    line-height: 1.6; /* Melhora a leitura do texto */
}

a {
    color: var(--cor-acento-misterio);
    text-decoration: none; /* Remove o sublinhado padrão */
    transition: color 0.3s ease; /* Transição suave para interação */
}

a:hover {
    color: var(--cor-acento-hover);
}

h1, h2, h3 {
    font-family: var(--fonte-titulo);
    color: var(--cor-texto-principal);
    margin-bottom: 0.5em;
}

/* Estilos básicos para o container principal */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}