/* ============================================================================
   Observatório Urbano de Matosinhos — tokens do design system
   Figma `rpoogpgb1xR5DUqtg3REH0` (versão 2387690074973264988).

   Os valores aqui NÃO são escolhas: são leituras do ficheiro do Figma, feitas
   com as ferramentas em `workspace/_analyses/figma-tools/`. Quando algo não
   existe no desenho, está anotado — para se saber o que é decisão nossa.
   ========================================================================= */

:root {
    /* --- Cor -------------------------------------------------------------
       O azul-petróleo é a cor do TEXTO (418 ocorrências no ficheiro); o ciano
       é a marca e o acento (títulos de artigo, Painel CI, legenda do herói). */
    --mtz-petroleo: #063a54;
    --mtz-ciano: #00a3db;
    --mtz-azul-claro: #c8e9f4; /* legenda dos cartões de notícia */
    --mtz-cinza-imagem: #e9e9e9; /* área de imagem sem fotografia */
    --mtz-branco: #ffffff;

    /* Fundos: a home, as notícias e o mercado são #FAFAFA; as páginas de
       opinião são #F5F5F5. São dois fundos diferentes, de propósito. */
    --mtz-fundo: #fafafa;
    --mtz-fundo-opiniao: #f5f5f5;

    /* Painel CI — texto sobre ciano. O rótulo é escuro e o valor quase branco:
       é o contraste invertido que o desenho usa para destacar o número. */
    --mtz-painel-rotulo: #1e1e1e;
    --mtz-painel-valor: #f3f3f3;
    --mtz-painel-variacao: #f5f5f5;

    /* Apoio */
    --mtz-apoio: #757575; /* "Partilha", "Em parceria com" */
    --mtz-quase-preto: #1e1e1e; /* citação nos cartões de opinião pequenos */
    --mtz-preto: #000000; /* nome do autor nos cartões pequenos */
    --mtz-avatar: rgba(77, 77, 77, 0.2); /* avatar sem foto, cartão grande */
    --mtz-avatar-peq: rgba(134, 133, 133, 0.2); /* idem, cartão pequeno */
    --mtz-miniatura: rgba(0, 0, 0, 0.07); /* miniatura sem foto, lista lateral */

    /* --- Sombras ---------------------------------------------------------
       Uma só sombra, e é o estado `hover` de TODOS os cartões (verificado com
       `diffvar.py` sobre as variantes dos componentes). */
    --mtz-sombra-hover: 0 2px 4px rgba(0, 0, 0, 0.15);
    --mtz-sombra-footer: 0 -1px 1px #e6e6e6;

    /* --- Tipografia ------------------------------------------------------
       Três famílias, todas no Google Fonts:
         Manrope        — tudo (interface, títulos, corpo)
         IBM Plex Mono  — só metadados (data · tempo de leitura · fonte)
         Nunito         — só nome e cargo do autor nos cartões de opinião */
    --mtz-fonte: "Manrope", "Helvetica Neue", Arial, sans-serif;
    --mtz-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --mtz-fonte-autor: "Nunito", "Helvetica Neue", Arial, sans-serif;

    /* --- Medidas ---------------------------------------------------------
       Faixa de conteúdo 1320 com margem 60 (viewport 1440). O footer tem
       margem própria de 106 e faixa de 1228. */
    --mtz-conteudo: 1320px;
    --mtz-margem: 60px;
    --mtz-conteudo-footer: 1228px;
    --mtz-margem-footer: 106px;

    /* Largura do corpo de um artigo, e do bloco de cabeçalho do artigo, que é
       mais largo do que o corpo (981 contra 816) e igualmente centrado. */
    --mtz-corpo-artigo: 816px;
    --mtz-cabecalho-artigo: 981px;

    /* Raios: 30 em cartões e imagens, 22 nos indicadores, 20 nos cartões de
       opinião. Não é um valor único — são três, e distinguem as famílias. */
    --mtz-raio: 30px;
    --mtz-raio-indicador: 22px;
    --mtz-raio-opiniao: 20px;

    --mtz-altura-navbar: 83px;
}