/*
 * ViaInter — Tokens do Sistema Visual do Portal (VI-003 v1.1)
 *
 * FOLHA ÚNICA DE TOKENS. Só define custom properties em :root — não contém
 * nenhuma regra de componente, portanto NÃO altera a aparência por si só.
 * Os componentes migram para estes tokens de forma progressiva, sempre no
 * formato var(--vi-token, #fallback-idêntico): se esta folha não carregar,
 * o componente continua exatamente como era.
 *
 * Origem dos valores:
 *   - IDENTIDADE (VI-003 §1.3, paleta preservada): petróleo, ouro, off-white.
 *   - EM USO: valores que já existiam em componentes (rótulo "em uso").
 *   - ALVO (VI-003, "a validar em SPEC"): definidos, mas ainda NÃO aplicados
 *     a nenhum componente — não mudam nada até a etapa da Home/Situação.
 *
 * Convenção: --vi-color-* (valores brutos) · --vi-surface-* / --vi-text /
 * --vi-border… (aliases semânticos — componentes novos devem preferir estes).
 */

:root {
	/* ── Cores — identidade (VI-003 §4) ─────────────────────────────── */
	--vi-color-petroleo: #123B4A;      /* títulos, links, botão primário, cabeçalho/rodapé */
	--vi-color-ouro: #D4A853;          /* acento: filetes, marcadores, foco (nunca texto sobre claro: 1,9:1) */
	--vi-color-off-white: #F4F0E8;     /* superfície editorial (não obrigatória como fundo de página) */
	--vi-color-tinta: #24292C;         /* texto padrão (12,9:1 sobre off-white) */
	--vi-color-branco: #FFFFFF;

	/* ── Cores — em uso nos componentes atuais ──────────────────────── */
	--vi-color-petroleo-suave: #1E4553;     /* fundo do cabeçalho (petróleo −5%, OP-002) */
	--vi-color-petroleo-profundo: #0D2C38;  /* mapa: tom escuro de apoio */
	--vi-color-verde-profundo: #0E3E34;     /* selo de Artigo (5ª cor da paleta) */
	--vi-color-ouro-selo: #B8873A;          /* selo de Situação */
	--vi-color-ouro-texto: #8A6415;         /* ÚNICO ouro oficial para TEXTO sobre claro (VI-003 v1.1): 4,72:1 s/ off-white, 5,36:1 s/ branco — valor do banner do Mapa */
	--vi-color-ouro-escuro: #7A5A1E;        /* LEGADO do Mapa (--vm-ouro-tinta), não oficial: consolidar em --vi-color-ouro-texto na migração do Mapa */
	--vi-color-cinza-texto: #566065;        /* texto de apoio (Mapa) */
	--vi-color-cinza-borda-forte: #A9B1B3;  /* borda forte (Mapa) */

	/* ── Superfícies e bordas — em uso ──────────────────────────────── */
	--vi-surface-faixa: #EDE6D8;            /* faixa sutil / texto do menu sobre petróleo */
	--vi-surface-ouro-claro: #F9F2E5;       /* destaque de Coleção, blockquote (dourado a 85%) */
	--vi-surface-ouro-claro-2: #F3E7CB;     /* fundo de ouro do Mapa */
	--vi-surface-papel: #F4EFE6;            /* capas de volume, ícones */
	--vi-surface-selo-situacao: #F7EFDC;
	--vi-surface-selo-artigo: #E2ECE9;
	--vi-surface-selo-colecao: #E4EAEC;
	--vi-color-borda: #E4DCCB;              /* borda de cartões (1px) */
	--vi-color-borda-mapa: #D9D3C4;

	/* ── Aliases semânticos (preferir nos componentes novos) ────────── */
	--vi-text: var(--vi-color-tinta);
	--vi-heading: var(--vi-color-petroleo);
	--vi-link: var(--vi-color-petroleo);
	--vi-accent: var(--vi-color-ouro);
	--vi-focus: var(--vi-color-ouro);
	--vi-surface-page: var(--vi-color-off-white);
	--vi-surface-card: var(--vi-color-branco);
	--vi-surface-band: var(--vi-surface-faixa);
	--vi-surface-dominant: var(--vi-color-petroleo);  /* no máx. 1 grande superfície cromática dominante por página (VI-003 §1.4) */
	--vi-on-dark: var(--vi-surface-faixa);
	--vi-border: var(--vi-color-borda);

	/* ── Tipografia ─────────────────────────────────────────────────── */
	/* EM USO: corpo em DM Sans (preset do tema); títulos herdam do tema. */
	--vi-font-body: var(--wp--preset--font-family--dmsans, DMSans, sans-serif);
	/* ALVO (VI-003 §5), ainda não aplicado: voz editorial dos H1–H2. */
	--vi-font-editorial: var(--wp--preset--font-family--trirong, Trirong, Georgia, serif);
	--vi-fs-h1: clamp(2.5rem, 1.6rem + 3vw, 3.5rem);   /* ALVO — 40–56px, a validar */
	--vi-fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.125rem); /* ALVO — 28–34px */
	--vi-fs-h3: clamp(1.25rem, 1.15rem + .5vw, 1.375rem); /* ALVO — 20–22px */
	--vi-fs-reading: 1.125rem;                          /* ALVO — 18px */
	--vi-fs-ui: 1rem;                                   /* ALVO — 16px */
	--vi-lh-reading: 1.7;
	--vi-measure: 66ch;                                 /* coluna de leitura */

	/* ── Espaçamento — escala 4/8 (VI-003 §6): 8·16·24·32·48·72·112 px ─ */
	--vi-space-1: .5rem;
	--vi-space-2: 1rem;
	--vi-space-3: 1.5rem;
	--vi-space-4: 2rem;
	--vi-space-5: 3rem;
	--vi-space-6: 4.5rem;
	--vi-space-7: 7rem;
	--vi-gutter: 1.5rem;         /* tablet e acima */
	--vi-gutter-mobile: 1rem;

	/* ── Larguras ───────────────────────────────────────────────────── */
	--vi-width-reading: 700px;   /* = content-size atual do tema */
	--vi-width-wide: 1100px;     /* = wide-size atual do tema (VI-003 cita ~1120; mantido o valor efetivo) */
	/* Breakpoints (não usáveis em @media via var): 767px (mobile) · 899px (tablet). */

	/* ── Raios ──────────────────────────────────────────────────────── */
	--vi-radius-xs: 4px;         /* em uso: capa de volume, blockquote */
	--vi-radius-sm: 6px;         /* em uso */
	--vi-radius-control: 8px;    /* em uso: cartões de coleção/aquisição; ALVO: botões */
	--vi-radius-card: 12px;      /* em uso: cartões do funil */
	--vi-radius-image: 8px;      /* ALVO — imagens (a Home usa hoje 20px no herói, mantido) */
	--vi-radius-pill: 999px;     /* em uso: selos e termos */
	--vi-border-width: 1px;
}