/* ============================================================
   Perto Digital — Tokens oficiais da marca
   Fonte: Manual de Marca (Figma) + apresentação comercial 2026
   Central de Identidade · versão set/2026
   ============================================================ */

:root {
  /* Primárias */
  --perto-turquesa: #0B5A6A;       /* títulos, ícones, botões, destaques, backgrounds */
  --perto-oliva: #9CB865;          /* verde do logo */
  --perto-oliva-grad-ini: #82A341; /* gradiente do ícone — início */
  --perto-oliva-grad-fim: #C1DC89; /* gradiente do ícone — fim */

  /* Secundárias */
  --perto-lima: #91C829;           /* energia, CTAs */
  --perto-lima-clara: #B3F169;     /* destaque de texto sobre fundo escuro */

  /* Fundos escuros (base da marca) */
  --perto-bg: #00171D;
  --perto-bg-2: #001F24;
  --perto-bg-3: #00232B;

  /* Neutros Gelo (superfícies claras) */
  --perto-gelo-50: #F8FEFE;
  --perto-gelo-200: #DCE8EA;
  --perto-gelo-400: #BCD1D1;
  --perto-ink: #0B2429;            /* texto sobre fundo claro (cor do wordmark) */

  /* Apoio */
  --perto-ciano: #00A5C1;          /* wordmark "Perto" nos produtos, links, acentos */
  --perto-verde-btn: #49842A;      /* botão sólido */
  --perto-verde-btn-hover: #5CA43E;

  /* Dataviz */
  --perto-viz-ciano: #00E3F9;
  --perto-viz-verde: #00F83F;
  --perto-viz-amarelo: #FFE61D;

  /* Vidro (glassmorphism — pilar central da identidade) */
  --perto-glass-bg: linear-gradient(135deg, rgba(11, 90, 106, .38), rgba(0, 31, 36, .55));
  --perto-glass-border: rgba(127, 227, 236, .28);

  /* Tipografia — Baloo 2: logos/produtos/publicidade · Inter: todo o resto */
  --perto-font-display: "Baloo 2", "Inter", system-ui, sans-serif;
  --perto-font-text: "Inter", system-ui, -apple-system, sans-serif;

  /* Raios */
  --perto-radius-card: 16px;
  --perto-radius-btn: 10px;
}

/* Receita oficial do card de vidro */
.perto-glass {
  background: var(--perto-glass-bg);
  border: 1px solid var(--perto-glass-border);
  border-radius: var(--perto-radius-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
}

/* Fundo de página dark padrão */
.perto-page-dark {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(11, 90, 106, .35), transparent),
    linear-gradient(160deg, var(--perto-bg-3), var(--perto-bg) 60%);
  color: #fff;
  font-family: var(--perto-font-text);
}

/* Regras de contraste (WCAG 2.1):
   ✓ branco sobre #00171D (~19:1) · #B3F169 sobre #00171D (~13:1)
   ✓ branco sobre #0B5A6A (~7,7:1) · #0B5A6A sobre branco (~7,7:1)
   ✓ #00A5C1 sobre #00171D (~5,5:1) · branco sobre #49842A (~4,6:1)
   ✗ NUNCA: lima/oliva como texto sobre branco (< 2,3:1)
   No claro, o destaque vira turquesa #0B5A6A ou verde #49842A. */