/* =====================================================
   base.css — Volthor
   Reset + Variáveis padrão (tema ESCURO) + tipografia
   ===================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---------- Variáveis: tema padrão (ESCURO) ---------- */
:root {
    /* Marca */
    --cor-vermelho:         #d32f2f;
    --cor-vermelho-escuro:  #b71c1c;
    --cor-vermelho-claro:   #ef5350;
    --cor-vermelho-vibrante:#e53935;

    /* Neutros */
    --cor-preto:            #0d0d0d;
    --cor-preto-suave:      #1a1a1a;
    --cor-cinza-escuro:     #2b2b2b;
    --cor-cinza:            #4a4a4a;
    --cor-cinza-claro:      #e5e5e5;
    --cor-cinza-fundo:      #f5f5f5;
    --cor-branco:           #ffffff;

    /* Semânticas do tema (o que o tema claro vai sobrescrever) */
    --fundo-pagina:         var(--cor-preto);
    --fundo-pagina-alt:     var(--cor-preto-suave);
    --fundo-superficie:     var(--cor-preto-suave);
    --fundo-superficie-alt: var(--cor-cinza-escuro);
    --fundo-filtro:         var(--cor-preto-suave);
    --fundo-modal:          var(--cor-preto-suave);

    --texto-primario:       #ffffff;
    --texto-secundario:     #e0e0e0;
    --texto-suave:          #b0b0b0;
    --texto-invertido:      #0d0d0d;

    --borda-suave:          rgba(255, 255, 255, 0.08);
    --borda-media:          #2b2b2b;
    --borda-destaque:       var(--cor-vermelho);

    --acento:               var(--cor-vermelho);
    --acento-claro:         var(--cor-vermelho-claro);
    --acento-escuro:        var(--cor-vermelho-escuro);

    /* Botão de destaque (Login) */
    --botao-destaque-bg:        var(--cor-vermelho);
    --botao-destaque-bg-hover:  var(--cor-vermelho-escuro);
    --botao-destaque-texto:     var(--cor-branco);

    /* Sombras */
    --sombra-leve:  0 2px 8px  rgba(0, 0, 0, 0.35);
    --sombra-media: 0 4px 16px rgba(0, 0, 0, 0.45);
    --sombra-forte: 0 8px 28px rgba(0, 0, 0, 0.55);
    --sombra-acento:0 4px 20px rgba(211, 47, 47, 0.35);

    /* Métricas */
    --container-max:      1400px;
    --radius-sm:          4px;
    --radius-md:          8px;
    --radius-lg:          10px;
    --radius-pill:        999px;

    --transicao:          all 0.3s ease;
    --transicao-rapida:   all 0.2s ease;

    /* Tipografia */
    --fonte-base:  'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --fonte-titulo:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Camadas (z-index) */
    --z-cabecalho: 100;
    --z-modal:     1000;
    --z-tooltip:   10;
}

/* ---------- Base ---------- */
html,
body {
    height: 100%;
}

html {
    color-scheme: dark;   /* barra de rolagem nativa escura */
}

html[data-tema="claro"] {
    color-scheme: light;
}

body {
    font-family: var(--fonte-base);
    background-color: var(--fundo-pagina);
    color: var(--texto-primario);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
}

img {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ---------- Layout base ---------- */
.conteudo {
    flex: 1;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 2rem;
}

/* ---------- Utilitários ---------- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[hidden] {
    display: none !important;
}

/* ---------- Responsivo base ---------- */
@media (max-width: 768px) {
    .conteudo {
        padding: 1rem;
    }
}