/* ============================================================
JubartData Design System — tokens.css
Direção A2 — Editorial institucional
Versão 1.0 · Fase 0 · maio/2026
COMO USAR
---------
Importe este arquivo ANTES de qualquer outro CSS:
Todos os valores visuais do portal e dos relatórios devem
referenciar variáveis deste arquivo. Nunca use valores
literais de cor, tamanho ou espaçamento fora dos tokens.
Fonte canônica: docs/26_design_system_jubart.md
============================================================ */
/* ── Fontes (Google Fonts — sem custo) ─────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,600&family=Inter:wght@400;500;600;700&display=swap');
:root {
/* ── Fontes ─────────────────────────────────────────────── */
--font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
--font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'IBM Plex Mono', 'Fira Code', 'Courier New', monospace;
/* Pesos */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
/* ── Escala tipográfica (razão 1.250) ───────────────────── */
/* base = 16px / 1rem */
--text-xs: 0.64rem; /* ~10px — eyebrow, legenda discreta */
--text-sm: 0.8rem; /* ~13px — label, meta, caption */
--text-base: 1rem; /* 16px — corpo principal */
--text-lg: 1.125rem; /* ~18px — lead, intro de seção */
--text-xl: 1.25rem; /* 20px — título de card */
--text-2xl: 1.563rem; /* ~25px — subtítulo de página */
--text-3xl: 1.953rem; /* ~31px — título de seção */
--text-4xl: 2.441rem; /* ~39px — título de página */
--text-5xl: 3.052rem; /* ~49px — hero principal */
--text-6xl: 3.815rem; /* ~61px — display excepcional */
/* Entrelinhamento */
--leading-tight: 1.1;
--leading-snug: 1.3;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
--leading-loose: 1.8;
/* Espaçamento entre letras */
--tracking-tight: -0.02em;
--tracking-normal: 0em;
--tracking-wide: 0.03em;
--tracking-wider: 0.06em;
--tracking-widest: 0.12em;
/* ── Paleta base — neutros quentes ─────────────────────── */
/* Inspiração: papel de jornal premium, FT Weekend */
--neutral-50: #faf8f4; /* fundo de página — creme claro */
--neutral-100: #f2ede3; /* superfície elevada, bg de seção alt */
--neutral-200: #e5ddd0; /* borda sutil */
--neutral-300: #cfc4b0; /* borda visible, separador */
--neutral-400: #a89880; /* placeholder, ícone inativo */
--neutral-500: #847160; /* texto mudo */
--neutral-600: #65574a; /* texto secundário */
--neutral-700: #483e34; /* texto principal */
--neutral-800: #2d2520; /* texto forte, títulos */
--neutral-900: #1a1612; /* tinta — quase-preto quente */
/* ── Paleta de marca ────────────────────────────────────── */
/* Teal (cor primária de ação) */
--brand-teal: #145f72;
--brand-teal-dark: #0f4f5f;
--brand-teal-light: #1a7a93;
--brand-teal-subtle: rgba(20, 95, 114, 0.08);
--brand-teal-medium: rgba(20, 95, 114, 0.18);
/* Dourado
ATENÇÃO DE ACESSIBILIDADE:
--brand-gold (puro) tem contraste 1.6:1 sobre branco — REPROVADO AA.
Use APENAS sobre fundos escuros (header, hero dark).
Para texto sobre fundo claro, use --brand-gold-aa (5.1:1 sobre branco). */
--brand-gold: #f2b705; /* somente sobre fundo escuro */
--brand-gold-dark: #d9a204; /* hover do botão gold sobre escuro */
--brand-gold-aa: #b88a1a; /* ✅ AA — texto/ícone sobre fundo claro */
--brand-gold-subtle: rgba(242, 183, 5, 0.08);
--brand-gold-medium: rgba(242, 183, 5, 0.20);
/* Tinta (quase-preto da marca) */
--brand-ink: #1c1a17;
/* ── Cores semânticas ───────────────────────────────────── */
--color-bg: var(--neutral-50); /* fundo de página */
--color-surface: #ffffff; /* cards, modais, formulários */
--color-surface-alt: var(--neutral-100); /* seção alternada, sidebar */
--color-border: var(--neutral-200); /* borda padrão */
--color-border-strong: var(--neutral-300); /* borda visible (divisor) */
--color-text-primary: var(--neutral-800); /* corpo e títulos principais */
--color-text-secondary:var(--neutral-600); /* texto de suporte */
--color-text-muted: var(--neutral-500); /* meta, caption, placeholder */
--color-text-inverse: #ffffff; /* sobre fundos escuros */
--color-text-brand: var(--brand-teal); /* links e ações de marca */
--color-text-accent: var(--brand-gold-aa); /* destaque AA-safe */
/* Status */
--color-danger: #b91c1c;
--color-danger-bg: #fef2f2;
--color-danger-border: #fecaca;
--color-success: #166534;
--color-success-bg: #f0fdf4;
--color-success-border: #bbf7d0;
--color-warning: #92400e;
--color-warning-bg: #fffbeb;
--color-warning-border: #fde68a;
--color-info: var(--brand-teal);
--color-info-bg: var(--brand-teal-subtle);
--color-info-border:var(--brand-teal-medium);
/* ── 5 Eixos analíticos ─────────────────────────────────── */
/* Cores AA sobre branco (contraste ≥ 4.5:1). */
/* Usadas em badges, labels de categoria, borda de card. */
--axis-varejo: #9a3412; /* terra cota — mercado de varejo */
--axis-varejo-bg: #fff7ed;
--axis-varejo-border: #fed7aa;
--axis-comex: #1e3a8a; /* azul profundo — comércio exterior */
--axis-comex-bg: #eff6ff;
--axis-comex-border: #bfdbfe;
--axis-producao: #166534; /* verde floresta — produção */
--axis-producao-bg: #f0fdf4;
--axis-producao-border:#bbf7d0;
--axis-noticias: #581c87; /* púrpura — notícias e qualitativos */
--axis-noticias-bg: #faf5ff;
--axis-noticias-border:#e9d5ff;
--axis-macro: var(--brand-teal); /* teal — macroeconomia */
--axis-macro-bg: var(--brand-teal-subtle);
--axis-macro-border: var(--brand-teal-medium);
/* ── Escala de espaçamento (base 4px) ───────────────────── */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
/* ── Raios de borda ─────────────────────────────────────── */
/* Mais sóbrios que o portal atual (22px → máx 16px). */
/* 22px era excessivo para conteúdo analítico sério. */
--radius-none: 0;
--radius-sm: 4px; /* inputs, badges compactos */
--radius-md: 8px; /* cards de conteúdo, alertas */
--radius-lg: 12px; /* cards de produto, modais */
--radius-xl: 16px; /* hero inset, painéis destacados */
--radius-full: 9999px; /* pílulas (tags, status chips) */
/* ── Sombras (quentes, sutis) ───────────────────────────── */
/* Usa --brand-ink como base do shadow para coerência cromática */
--shadow-xs: 0 1px 2px rgba(28, 26, 23, 0.05);
--shadow-sm: 0 2px 6px rgba(28, 26, 23, 0.07);
--shadow-md: 0 4px 16px rgba(28, 26, 23, 0.09);
--shadow-lg: 0 8px 28px rgba(28, 26, 23, 0.11);
--shadow-xl: 0 16px 48px rgba(28, 26, 23, 0.14);
/* ── Transições ─────────────────────────────────────────── */
--transition-fast: 100ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease-in-out;
/* ── Z-index ────────────────────────────────────────────── */
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-toast: 500;
/* ── Layout ─────────────────────────────────────────────── */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1140px;
--container-2xl: 1440px;
/* ── Breakpoints (referência — use em @media) ───────────── */
/* CSS puro não suporta var() em media queries. */
/* Referência documental; use os valores numéricos no @media. */
/* sm: 640px / md: 768px / lg: 1024px / xl: 1280px */
/* ── Tokens compostos — tipografia editorial ────────────── */
/* Atalhos para padrões recorrentes no portal. */
--type-edition: /* "edição 21 mai · semana 20" */
var(--weight-medium) var(--text-sm) / var(--leading-normal) var(--font-sans);
--type-eyebrow: /* "OBSERVATÓRIO · VAREJO" */
var(--weight-bold) var(--text-xs) / var(--leading-normal) var(--font-sans);
--type-headline: /* hero principal */
var(--weight-bold) var(--text-5xl) / var(--leading-tight) var(--font-serif);
--type-subheadline: /* subtítulo de seção */
var(--weight-semibold) var(--text-3xl) / var(--leading-snug) var(--font-serif);
--type-card-title: /* título de card de relatório */
var(--weight-semibold) var(--text-xl) / var(--leading-snug) var(--font-serif);
--type-body: /* corpo de texto */
var(--weight-regular) var(--text-base) / var(--leading-relaxed) var(--font-sans);
--type-body-serif: /* corpo em contexto editorial */
var(--weight-regular) var(--text-lg) / var(--leading-loose) var(--font-serif);
--type-label: /* label de form, meta de dado */
var(--weight-semibold) var(--text-sm) / var(--leading-normal) var(--font-sans);
--type-caption: /* legenda, nota de rodapé */
var(--weight-regular) var(--text-sm) / var(--leading-normal) var(--font-sans);
}
/* ── Modo escuro (futuro) ───────────────────────────────────── */
/* Reservado para Fase 2. Não implementar antes de Fase 1 estar */
/* estável. Quando chegar a hora, sobrescrever aqui. */
/*
@media (prefers-color-scheme: dark) {
:root {
--color-bg: var(--neutral-900);
--color-surface: var(--neutral-800);
...
}
}
*/