/* tokens.css — galeria de infográficos ilustrados.
 *
 * DIREÇÃO VISUAL: Variante A (clara/sans) do acervo — página branca, Libre
 * Franklin (títulos + corpo) + IBM Plex Mono (eyebrows/labels), cartões com
 * fundo tingido pelo ACENTO DA CLASSE PROCESSUAL (não pela edição). Subset dos
 * tokens de `frontend/styles/tokens.css`.
 *
 * R4: fontes AUTO-HOSPEDADAS em assets/fonts/ (OFL) — sem CDN em runtime.
 * O acento de cada cartão vem do JSON (--capa-acento, hex por classe), com
 * fallback --acento.
 */

/* ── Fontes (Variante A) ─────────────────────────────────────────────────── */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/LibreFranklin-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');
}

:root {
  /* --- Tinta / texto --- */
  --cor-tinta: #1c1e26;
  --cor-titulo: #171a21;
  --cor-forte: #2e313a;
  --cor-suave: #6b6e78;          /* secundário — 5.09:1 */
  --cor-label: #767162;          /* label mono quente — 4.87:1 */
  --cor-sub: #726d5c;            /* sub-labels — 5.18:1 */
  --cor-tenue: #b7b0a0;

  /* --- Papel / superfícies --- */
  --cor-branco: #ffffff;
  --cor-realce-claro: #f1ece1;
  --cor-hover-item: #fcf9f2;
  --cor-limpar-bg: #efeae0;

  /* --- Fios / bordas --- */
  --cor-fio: #e7e2d8;
  --cor-fio-card: #ece7dd;
  --cor-fio-suave: #ebe6db;
  --cor-fio-tenue: #f0ebe0;

  /* --- Ênfase / fallback de acento --- */
  --cor-bordo: #8a2f3b;

  /* --- Superfície escura (lightbox/overlay) --- */
  --cor-navy: #1c2030;
  --cor-navy-texto: #f4f2ec;
  --cor-navy-label: #8e93a6;

  /* --- Papéis semânticos --- */
  --fundo: var(--cor-branco);
  --superficie: var(--cor-branco);
  --texto: var(--cor-tinta);
  --texto-suave: var(--cor-suave);
  --acento: var(--cor-bordo);        /* fallback quando o item não tem accent */
  --foco: var(--cor-bordo);

  /* --- Tipografia --- */
  --fonte-titulo: 'Libre Franklin', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fonte-corpo: 'Libre Franklin', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fonte-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --escala-base: 1rem;
  --escala-pequena: 0.875rem;
  --escala-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);   /* hero — igual ao acervo */
  --altura-linha: 1.6;
  --altura-linha-titulo: 1.15;

  /* --- Fios / raios --- */
  --raio: 11px;
  --raio-card: 18px;
  --raio-pilula: 999px;

  /* --- Sombras --- */
  --sombra-card: 0 10px 30px -20px rgba(30, 25, 15, 0.3);
  --sombra-card-hover: 0 16px 34px -18px rgba(30, 25, 15, 0.45);
  --sombra-pilula: 0 6px 22px -12px rgba(30, 25, 15, 0.35);

  /* --- Espaçamento --- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;

  --transicao: 160ms ease;
}