/*
  Vem Brasil — Design Tokens
  Fonte: docs/knowledge/expert-business/posicionamento/design-system.md
  Uso: importar em qualquer peça HTML/artifact produzida para a marca Vem Brasil.
*/

:root {
  /* Cores de marca — papéis fixos, não intercambiáveis */
  --vb-verde: #0B7A3D;
  --vb-amarelo: #F5C518;
  --vb-azul: #1560BD;
  --vb-branco: #FFFFFF;

  /* Neutros de apoio */
  --vb-texto-principal: #132A1E;
  --vb-texto-secundario: #4B5B52;
  --vb-texto-terciario: #8A8578;
  --vb-fundo-alternado: #F7F4EC;
  --vb-borda: #E7E2D6;
  --vb-alerta-fundo: #FDECEC;
  --vb-alerta-texto: #7A2E2E;
  --vb-alerta-borda: #F3C9C9;

  /* Aliases semânticos */
  --surface-primary: var(--vb-verde);
  --accent-badge: var(--vb-amarelo);
  --category-band: var(--vb-azul);
  --surface-alt: var(--vb-fundo-alternado);
  --text-body: var(--vb-texto-secundario);
  --text-heading: var(--vb-texto-principal);
  --text-meta: var(--vb-texto-terciario);

  /* Tipografia */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Source Sans 3', 'Segoe UI', sans-serif;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 100px;

  /* Layout */
  --content-max-width: 1200px;
  --content-max-width-article: 900px;
  --section-padding: 100px 80px;
}

/* Import de fontes — incluir no <head> quando possível:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Source+Sans+3:wght@400;500;600;700&display=swap" rel="stylesheet" />
*/

.vb-serif { font-family: var(--font-serif); }
.vb-sans { font-family: var(--font-sans); }

.vb-badge {
  background: var(--vb-amarelo);
  color: var(--vb-texto-principal);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-weight: 700;
}

.vb-category-pill {
  background: var(--vb-azul);
  color: var(--vb-branco);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
}

.vb-card {
  background: var(--vb-branco);
  border: 1px solid var(--vb-borda);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.vb-callout {
  background: var(--vb-fundo-alternado);
  border-left: 4px solid var(--vb-amarelo);
  border-radius: var(--radius-sm);
  padding: 24px 28px;
}