/* ==========================================================================
   Projeto Beija-Flor – base.css
   Tokens (cores, fontes, espaços), reset, tipografia e utilitários.
   Todas as cores do site saem destas variáveis: para mudar a paleta, mude aqui.
   ========================================================================== */

/* Fontes hospedadas no próprio site (sem Google Fonts em tempo de execução) */
@font-face {
    font-family: "Oswald";
    src: url("../fonts/oswald-variavel.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-variavel.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Cores da marca */
    --verde: #43C05F;               /* Verde Beija-Flor: fundos, botões, destaques sobre o escuro */
    --verde-claro: #5BCF76;         /* verde no hover */
    --verde-titulo: #2B8C43;        /* palavra em verde nos títulos grandes (contraste 4,3:1) */
    --verde-texto: #247A3A;         /* verde para texto pequeno sobre branco (contraste 5,4:1) */
    --verde-suave: #E7F5EC;         /* fundo de ícones e alertas de sucesso */
    --verde-bem-suave: #F2FAF5;
    --vermelho: #E2261D;            /* vermelho do beija-flor: só detalhes */
    --vermelho-texto: #B51D16;
    --vermelho-suave: #FFF6F5;
    --amarelo: #F2B01E;
    --amarelo-texto: #6B4E00;
    --amarelo-suave: #FFF8E6;
    --escuro: #14201A;              /* seções escuras, rodapé, topo */
    --escuro-2: #1D2B23;            /* caixas sobre o escuro */
    --escuro-3: #26332C;

    /* Neutros */
    --texto: #26332C;
    --texto-secundario: #5E6A63;
    --texto-sobre-escuro: #D5DED8;
    --texto-secundario-escuro: #8FA197;
    --fundo: #FFFFFF;
    --fundo-suave: #F4F8F5;
    --borda: #E3E9E5;
    --borda-forte: #C9D4CD;

    /* Cor de cada oficina (só em detalhes: ícone, borda, selo) */
    --cor-danca: #E2261D;
    --cor-musica: #43C05F;
    --cor-scfv: #F2B01E;

    /* Tipografia */
    --fonte-titulo: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
    --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --texto-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);   /* 16 a 17 px */
    --texto-grande: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    --texto-pequeno: 0.875rem;
    --altura-linha: 1.6;

    /* Espaços e medidas */
    --largura-maxima: 1200px;
    --margem-lateral: clamp(16px, 4vw, 32px);
    --espaco-secao: clamp(56px, 8vw, 112px);
    --raio-pequeno: 8px;
    --raio: 14px;
    --raio-grande: 20px;
    --raio-pilula: 999px;

    /* Sombras */
    --sombra: 0 1px 2px rgba(20, 32, 26, 0.06), 0 8px 24px rgba(20, 32, 26, 0.07);
    --sombra-elevada: 0 2px 6px rgba(20, 32, 26, 0.08), 0 18px 40px rgba(20, 32, 26, 0.14);

    /* Movimento */
    --transicao: 200ms cubic-bezier(0.2, 0.7, 0.3, 1);

    /* Foco do teclado (em áreas escuras vira verde claro) */
    --foco: var(--verde-texto);
}

/* ---------- Reset enxuto ---------- */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 88px;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--fonte-texto);
    font-size: var(--texto-base);
    line-height: var(--altura-linha);
    color: var(--texto);
    background: var(--fundo);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
svg,
video,
iframe {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

p,
ul,
ol,
figure,
blockquote,
dl {
    margin: 0 0 1em;
}

address {
    font-style: normal;
}

/* ---------- Tipografia ---------- */

h1,
h2,
h3,
h4 {
    margin: 0 0 0.5em;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    line-height: 1.12;
    color: var(--escuro);
    text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); }
h2 { font-size: clamp(1.875rem, 1.4rem + 2vw, 3rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 600; }

a {
    color: var(--verde-texto);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--escuro);
}

strong,
b {
    font-weight: 650;
}

small,
.texto-pequeno {
    font-size: var(--texto-pequeno);
}

::selection {
    background: var(--verde);
    color: var(--escuro);
}

/* O atributo hidden sempre esconde (mesmo em elementos com display: flex/grid no CSS) */
[hidden] {
    display: none !important;
}

/* ---------- Acessibilidade ---------- */

:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 3px;
    border-radius: 4px;
}

.visualmente-oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pular-conteudo {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1000;
    padding: 12px 20px;
    border-radius: var(--raio-pilula);
    background: var(--verde);
    color: var(--escuro);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform var(--transicao);
}

.pular-conteudo:focus {
    transform: translateY(0);
}

main:focus {
    outline: none;
}

/* ---------- Layout ---------- */

.container {
    width: 100%;
    max-width: calc(var(--largura-maxima) + 2 * var(--margem-lateral));
    margin-inline: auto;
    padding-inline: var(--margem-lateral);
}

.container--estreito {
    max-width: calc(800px + 2 * var(--margem-lateral));
}

/* Ícones do sprite (tamanho acompanha o texto) */
.icone {
    display: inline-block;
    flex: none;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
}

/* Marcador de informação que falta (ver docs/PENDENCIAS.md) */
mark.pendente {
    display: inline;
    padding: 0.05em 0.4em;
    border: 1px dashed var(--amarelo);
    border-radius: 6px;
    background: #FFF1B8;
    color: var(--amarelo-texto);
    font-family: var(--fonte-texto);
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* Quem prefere menos movimento não vê animações */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}