/**
 * O NORTE — Design tokens
 * Etapa 2 · Deliverable 2.D2 · v1.0
 *
 * Fonte da verdade única para cor, tipografia e espaçamento.
 * Espelhado em theme.json para o Gutenberg — os dois arquivos DEVEM ficar sincronizados.
 *
 * Cores e escala tipográfica vêm do briefing §02 e são inegociáveis.
 * Tokens marcados [PROPOSTO] preenchem lacunas que o briefing não define; todos foram
 * aprovados no teste T2.1 (contraste WCAG AA) antes de entrarem aqui.
 *
 * Testes que governam este arquivo:
 *   T2.1  contraste WCAG AA .......... node tools/test-contrast.js   -> PASS
 *   T2.2  tamanho mínimo de fonte
 *   T2.5  integridade em 360px
 */

:root {
  /* ------------------------------------------------------------------ COR
     Briefing §02: "O vermelho não deve preencher grandes áreas da home.
     Seu papel é orientar e assinar." */

  --cor-vermelho:        #B40000;  /* marca, links, labels de editoria, alertas */
  --cor-preto:           #111111;  /* manchetes e corpo de texto */
  --cor-branco:          #FFFFFF;  /* fundo dominante */
  --cor-cinza-fundo:     #F2F2F2;  /* fundos auxiliares */

  --cor-vermelho-hover:  #8E0000;  /* [PROPOSTO] 9.77:1 — estado hover */
  --cor-texto-suave:     #3A3A3A;  /* [PROPOSTO] 11.37:1 — linha fina, texto secundário */
  --cor-meta:            #5F5F5F;  /* [PROPOSTO] 6.39:1 — autor, data, crédito de foto */
  --cor-linha:           #D8D8D8;  /* [PROPOSTO] linhas finas separadoras (decorativas) */

  /* Papéis semânticos — usar SEMPRE estes, nunca o token cru */
  --fundo-pagina:        var(--cor-branco);
  --fundo-secao:         var(--cor-cinza-fundo);
  --texto-principal:     var(--cor-preto);
  --texto-secundario:    var(--cor-texto-suave);
  --texto-meta:          var(--cor-meta);
  --marca:               var(--cor-vermelho);
  --link:                var(--marca);          /* segue --marca: no alto contraste vira amarelo junto */
  --link-hover:          color-mix(in srgb, var(--marca) 78%, var(--tinta));
  --regra:               var(--cor-linha);
  --foco:                var(--marca);
  --tinta:               var(--texto-principal); /* tinta geral; o plugin a troca no alto contraste */
  --tinta-fraca:         var(--texto-meta);

  /* ----------------------------------------------------------- TIPOGRAFIA
     Briefing §02: serifada para manchetes e identidade editorial;
     sans-serif para interface, metadados e textos funcionais.
     Máximo 2 famílias (briefing §08: "poucas famílias/pesos"). */

  --fonte-titulo: "Playfair Display", "Georgia", "Times New Roman", serif;
  --fonte-texto:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala fluida: interpola entre 360px (mínimo do briefing §08) e 1440px.
     Os valores batem exatamente com as faixas do briefing nas duas pontas. */

  /* Manchete XL — briefing: 42-64px desktop / 30-40px mobile */
  --fs-xl:   clamp(2rem, 1.417rem + 2.593vw, 3.75rem);       /* 32px -> 60px */

  /* Manchete L — briefing: 28-36px desktop / 24-30px mobile */
  --fs-l:    clamp(1.625rem, 1.458rem + 0.741vw, 2.125rem);  /* 26px -> 34px */

  /* Manchete M (cards secundários) — briefing: 20-26px */
  --fs-m:    clamp(1.25rem, 1.125rem + 0.556vw, 1.625rem);   /* 20px -> 26px */

  /* Corpo da matéria — briefing: 18-20px */
  --fs-corpo: clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem);  /* 18px -> 20px */

  /* Metadados NÃO interativos (data, crédito, label) — briefing §02: 12-15px */
  --fs-meta: clamp(0.8125rem, 0.7708rem + 0.1852vw, 0.9375rem); /* 13px -> 15px */

  /* Interface INTERATIVA (botão, menu, campo) — briefing §05: mínimo 16px.
     Ver NOTA-CONFLITO abaixo. */
  --fs-ui:   1rem;                                            /* 16px fixo */

  --peso-titulo:  700;
  --peso-corpo:   400;
  --peso-meta:    500;

  --lh-titulo:    1.12;   /* manchetes respiram pouco — linguagem de jornal */
  --lh-corpo:     1.65;   /* leitura longa confortável */
  --lh-meta:      1.4;

  --ls-titulo:   -0.015em;  /* leve aperto em serifa grande */
  --ls-label:     0.08em;   /* labels de editoria em caixa alta */

  /* ----------------------------------------------------------- ESPAÇAMENTO
     Base 4px. O espaço em branco é parte do design (briefing §02). */

  --e-1:  0.25rem;   /*  4px */
  --e-2:  0.5rem;    /*  8px */
  --e-3:  0.75rem;   /* 12px */
  --e-4:  1rem;      /* 16px */
  --e-5:  1.5rem;    /* 24px */
  --e-6:  2rem;      /* 32px */
  --e-7:  3rem;      /* 48px */
  --e-8:  4rem;      /* 64px */
  --e-9:  6rem;      /* 96px */

  /* ------------------------------------------------------------- LAYOUT */

  /* Coluna de leitura — briefing §06: 680-760px no desktop */
  --largura-leitura: 44rem;   /* 704px, dentro da faixa */
  --largura-conteudo: 75rem;  /* 1200px — grade principal */
  --largura-total: 90rem;     /* 1440px — faixas largas */

  --gutter: clamp(1rem, 0.5rem + 2.22vw, 2.5rem);  /* 16px @360 -> 40px @1440 */

  /* --------------------------------------------------------------- LINHAS
     Briefing §02: "linhas finas horizontais para separar editorias e blocos" */
  --regra-fina:   1px solid var(--regra);
  --regra-marca:  2px solid var(--marca);

  /* ------------------------------------------------------------- ALVOS DE TOQUE
     Briefing §05: "Áreas de toque com tamanho adequado" — WCAG 2.5.5 -> 44px */
  --alvo-toque: 2.75rem;  /* 44px */

  /* ---------------------------------------------------------------- FOCO
     Briefing §05: "foco de teclado visível" */
  --foco-espessura: 3px;
  --foco-offset: 2px;

  /* --------------------------------------------------------------- OUTROS
     Briefing §02 proíbe sombras, gradientes pesados e cantos muito arredondados. */
  --raio: 0;              /* jornal não tem canto arredondado */
  --sombra: none;         /* proibido pelo briefing */
  --transicao: 150ms ease;
}

/* ---------------------------------------------------------------------------
   NOTA-CONFLITO no briefing (declarada, conforme §11 exige)

   §02 diz: "Meta/Interface Sans-serif, 12-15 px"
   §05 diz: "Fonte mínima funcional de 16 px em interfaces"

   Os dois não podem valer para o mesmo elemento. Resolução adotada:
     - texto de METADADO, não interativo (data, crédito, label de editoria)
       -> --fs-meta, 13-15px. Atende §02.
     - elemento de INTERFACE interativo (botão, item de menu, campo, link de nav)
       -> --fs-ui, mínimo 16px. Atende §05 e a acessibilidade.

   Isso respeita a estética de jornal do §02 sem violar o piso de acessibilidade
   do §05. Se Cristovão preferir outra leitura, é ajuste de uma linha aqui.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   ACESSIBILIDADE — base aplicada globalmente
--------------------------------------------------------------------------- */

*:focus-visible {
  outline: var(--foco-espessura) solid var(--foco);
  outline-offset: var(--foco-offset);
}

/* Nunca remover o foco sem substituir por algo visível. */
*:focus:not(:focus-visible) { outline: none; }

@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;
  }
}