/* ============================================================================
   base.css — reset enxuto, tipografia e regras globais de foco.
   Corpo do produto em 12px; formulários e valores em 14px; H1 interno 16px.
   ============================================================================ */

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

html {
    color-scheme: light;
}

[data-tema="escuro"] {
    color-scheme: dark;
}

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte-corpo);
    font-size: 12px;
    line-height: 16px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

h1 { font-size: 16px; line-height: 24px; font-weight: 600; }
h2 { font-size: 14px; line-height: 20px; font-weight: 600; }

a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }

img { max-width: 100%; }

/* Garante [hidden] também em SVG inline (o UA stylesheet nem sempre cobre) */
[hidden] { display: none !important; }

/* Números sempre tabulares (valores, datas, códigos, contadores) */
.tabular, table, time { font-variant-numeric: tabular-nums; }

/* Foco visível — controles clicáveis: anel na cor --anel */
button:focus-visible,
[role="button"]:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: none;
    border-color: var(--anel);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--anel) 50%, transparent);
}

/* Foco de digitação — campos: borda + anel de 1px na primária (regra distinta do doc) */
input:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--primaria);
    box-shadow: 0 0 0 1px var(--primaria);
}

/* Desabilitado */
:disabled { opacity: .5; pointer-events: none; }
input:disabled, textarea:disabled, select:disabled { cursor: not-allowed; pointer-events: auto; }

/* Subtítulo de página: explica a tela em uma frase, abaixo do H1 */
.subtitulo-pagina { font-size: 12px; color: var(--neutra-texto); margin-top: 2px; }

/* Rótulo de grupo em caixa alta (eyebrow) */
.rotulo-grupo {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--neutra-texto);
}