/* ======================================================================
   Gobarito — tokens das páginas públicas (home, blog, artigos e política).
   Páginas brancas, marcadores de livro e destaques de marca-texto.
   O azul da própria logo organiza ações e navegação.
   ====================================================================== */

@font-face {
    font-family: "Inter";
    src: url("fontes/inter-latin-variavel.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Fraunces";
    src: url("fontes/fraunces-latin-variavel.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

/* Azul extraído da logo Gobarito; papel branco e papelaria discreta. */
:root {
    color-scheme: light;
    --topbar-height: 58px;
    --papel: #FFFFFF;
    --papel-alt: #F5F7FA;
    --superficie: #FFFFFF;
    --mesa: #F2F4F7;
    --tinta: #17263B;
    --tinta-suave: #566477;
    --linha: #CDD6E0;
    --marca-azul: #064288;
    --marca-filete: #3367A6;
    --azul-gobarito: #064288;
    --acento-azul-texto: #15365C;
    --acento-azul-superficie: #E8EFF8;
    --marcador-fundo: #DCEAFF;
    --postit-fundo: #FFF3C4;
    --postit-texto: #413A23;
    --acao-primaria: #064288;
    --acao-primaria-hover: #04346D;
    --acao-texto: #FFFFFF;
    --acerto: #2E7D4F;
    --erro: #A12622;
    --aviso: #795000;
    --acerto-superficie: #E8F5E9;
    --aviso-superficie: #FFF7DD;
    --foco: #064288;
    --blue-950: #17263B;
    --blue-900: #064288;
    --blue-800: #064288;
    --blue-700: #3367A6;
    --blue-100: #DCEAFF;
    --blue-50: #F5F7FA;
    --green-700: var(--acerto);
    --amber-700: var(--aviso);
    --page-bg: var(--papel);
    --surface: var(--superficie);
    --surface-strong: var(--superficie);
    --surface-translucida: var(--superficie);
    --ink: var(--tinta);
    --muted: var(--tinta-suave);
    --line: var(--linha);
    --line-strong: var(--tinta-suave);
    --marca-cta-fundo: var(--acao-primaria);
    --marca-cta-texto: var(--acao-texto);
    --marca-cta-gradiente: var(--acao-primaria);
    --focus-ring: 0 0 0 3px var(--foco);
    --shadow: none;
    --sombra-papel: 0 2px 10px rgba(6, 66, 136, 0.04), 0 1px 2px rgba(23, 38, 59, 0.05);
    --shadow-forte: 0 12px 32px rgba(0, 0, 0, 0.18);
    --radius: 4px;
    --radius-lg: 6px;
    --font-principal: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --font-display: "Fraunces", Georgia, serif;
}

[data-theme="dark"] {
    color-scheme: dark;
    --papel: #202938;
    --papel-alt: #273449;
    --superficie: #202938;
    --mesa: #151B25;
    --tinta: #EDF2F9;
    --tinta-suave: #BBC7D7;
    --linha: #516078;
    --marca-filete: #A9CDFF;
    --azul-gobarito: #A9CDFF;
    --acento-azul-texto: #DCEAFF;
    --acento-azul-superficie: #2C405D;
    --marcador-fundo: #334C71;
    --postit-fundo: #3B3526;
    --postit-texto: #F7EDCA;
    --acao-primaria: #A9CDFF;
    --acao-primaria-hover: #C7DFFF;
    --acao-texto: #0B264A;
    --acerto: #8FD4A6;
    --erro: #FF9D91;
    --aviso: #F2BD64;
    --acerto-superficie: #213629;
    --aviso-superficie: #38311B;
    --foco: #A9CDFF;
    --blue-950: #EDF2F9;
    --blue-900: #A9CDFF;
    --blue-800: #A9CDFF;
    --blue-700: #BFD9FC;
    --blue-100: #334C71;
    --blue-50: #273449;
}

/* Tipografia editorial pertence às páginas públicas, não ao componente de menu. */
body :is(h1, h2) {
    font-family: var(--font-display);
    font-weight: 600;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 0, "WONK" 0;
}

/* A faixa acompanha cada linha de texto, inclusive quando ele quebra. */
mark.marca-texto {
    padding: 0.03em 0.12em 0.01em;
    color: inherit;
    background:
        linear-gradient(173deg, transparent 44%, color-mix(in srgb, var(--marcador-fundo) 55%, transparent) 46% 91%, transparent 94%),
        linear-gradient(178deg, transparent 52%, var(--marcador-fundo) 54% 87%, transparent 90%);
    background-repeat: no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}


/* O traço sendo desenhado da esquerda para a direita quando a seção entra
   na tela. A classe é reaplicada pelo paginas-publicas.js. */
@media (prefers-reduced-motion: no-preference) {
    mark.marca-texto.marca-texto-traco {
        animation: marca-texto-traco 900ms cubic-bezier(0.5, 0, 0.2, 1) both;
    }
}

@keyframes marca-texto-traco {
    from { background-size: 0% 100%, 0% 100%; }
    to { background-size: 100% 100%, 100% 100%; }
}