/* ============================================================
   Design tokens — P2B v0.1.0
   DERIVADO de tokens.json (fonte da verdade). Não editar à mão:
   se divergir do JSON, o JSON vence — regenerar este arquivo.
   Uso no WordPress (Salient): enfileirar no salient-child ou
   colar em Aparência > Personalizar > CSS adicional; consumir
   via var(--p2b-*) no CSS do tema e nos módulos WPBakery.
   ============================================================ */

:root {
  /* --- Primitivos: cor --- */
  --p2b-azure-500: #0080FF; /* cor sagrada da marca */
  --p2b-azure-600: #006FDE; /* ação compacta — branco 4.85:1 */
  --p2b-azure-700: #0060BF; /* azul-tinta: texto/links — 6.13:1 */
  --p2b-azure-800: #004C99;
  --p2b-indigo-500: #4C5AD9;
  --p2b-purple-500: #8736A5;
  --p2b-red-500: #DC3232;
  --p2b-coral-500: #FF452B;
  --p2b-amber-500: #FFB900; /* nunca com texto branco */
  --p2b-teal-500: #3CAEA3;
  --p2b-teal-700: #217E75;
  --p2b-cyan-500: #00A0D2;
  --p2b-cyan-700: #007399;
  --p2b-neutro-0: #FFFFFF;
  --p2b-neutro-50: #F6F6F6;
  --p2b-neutro-100: #EFEFEF;
  --p2b-neutro-200: #E0E0E0;
  --p2b-neutro-400: #828282; /* só borda de input, texto grande, desabilitado */
  --p2b-neutro-600: #676767;
  --p2b-neutro-800: #444444;
  --p2b-neutro-900: #1F1F1F;
  --p2b-gradiente-assinatura: linear-gradient(135deg, #0080FF 0%, #4C5AD9 50%, #8736A5 100%);

  /* --- Primitivos: tipografia --- */
  --p2b-fonte-familia: "Poppins", system-ui, sans-serif;
  --p2b-peso-light: 300;
  --p2b-peso-regular: 400;
  --p2b-peso-medium: 500;
  --p2b-peso-semibold: 600;
  --p2b-peso-bold: 700;

  /* --- Primitivos: espaço (base 8px) --- */
  --p2b-espaco-2xs: 4px;
  --p2b-espaco-xs: 8px;
  --p2b-espaco-sm: 12px;
  --p2b-espaco-md: 16px;
  --p2b-espaco-lg: 24px;
  --p2b-espaco-xl: 32px;
  --p2b-espaco-2xl: 48px;
  --p2b-espaco-3xl: 64px;
  --p2b-espaco-4xl: 96px;

  /* --- Primitivos: raio --- */
  --p2b-raio-xs: 4px;
  --p2b-raio-sm: 10px;
  --p2b-raio-lg: 20px;
  --p2b-raio-pill: 999px;

  /* --- Primitivos: sombra --- */
  --p2b-sombra-1: 0 2px 8px rgba(31, 31, 31, 0.08);
  --p2b-sombra-2: 0 8px 24px rgba(31, 31, 31, 0.12);

  /* --- Primitivos: motion --- */
  --p2b-duracao-instantanea: 50ms;
  --p2b-duracao-rapida: 100ms;
  --p2b-duracao-normal: 200ms;
  --p2b-duracao-moderada: 300ms;
  --p2b-duracao-lenta: 400ms;
  --p2b-easing-padrao: cubic-bezier(0.4, 0, 0.2, 1);
  --p2b-easing-entrada: cubic-bezier(0, 0, 0.2, 1);
  --p2b-easing-saida: cubic-bezier(0.4, 0, 1, 1);
  --p2b-easing-linear: linear;

  /* --- Primitivos: layout --- */
  --p2b-largura-conteudo: 1140px;

  /* --- Semânticos: cor --- */
  --p2b-cor-fundo: var(--p2b-neutro-0);
  --p2b-cor-fundo-alternativo: var(--p2b-neutro-50);
  --p2b-cor-fundo-marca: var(--p2b-azure-500);
  --p2b-cor-fundo-escuro: var(--p2b-neutro-900);
  --p2b-cor-texto: var(--p2b-neutro-800);
  --p2b-cor-texto-corpo: var(--p2b-neutro-600);
  --p2b-cor-texto-sobre-marca: var(--p2b-neutro-0);
  --p2b-cor-texto-desabilitado: var(--p2b-neutro-400);
  --p2b-cor-acao-primaria: var(--p2b-azure-500);          /* texto branco ≥19px bold */
  --p2b-cor-acao-primaria-compacta: var(--p2b-azure-600); /* texto 14–18px */
  --p2b-cor-acao-hover: var(--p2b-azure-700);
  --p2b-cor-link: var(--p2b-azure-700);
  --p2b-cor-link-hover: var(--p2b-azure-800);
  --p2b-cor-destaque-titulo: var(--p2b-azure-700);
  --p2b-cor-borda: var(--p2b-neutro-200);
  --p2b-cor-borda-input: var(--p2b-neutro-400);
  --p2b-cor-foco: var(--p2b-azure-500);
  --p2b-cor-erro: var(--p2b-red-500);
  --p2b-cor-sucesso: var(--p2b-teal-700);
  --p2b-cor-aviso-fundo: var(--p2b-amber-500); /* texto: sempre neutro-900 */
  --p2b-cor-info: var(--p2b-cyan-700);

  /* --- Semânticos: escala tipográfica ---
     display usa clamp(): fluido sem quebrar zoom (nunca vw puro) */
  --p2b-tipo-display: var(--p2b-peso-bold) clamp(2.5rem, 1.75rem + 2.25vw, 3.5rem)/1.15 var(--p2b-fonte-familia);
  --p2b-tipo-h1: var(--p2b-peso-bold) clamp(2rem, 1.5rem + 1.5vw, 2.5rem)/1.2 var(--p2b-fonte-familia);
  --p2b-tipo-h2: var(--p2b-peso-semibold) clamp(1.75rem, 1.5rem + 0.75vw, 2rem)/1.25 var(--p2b-fonte-familia);
  --p2b-tipo-h3: var(--p2b-peso-semibold) 1.5rem/1.3 var(--p2b-fonte-familia);
  --p2b-tipo-h4: var(--p2b-peso-semibold) 1.25rem/1.4 var(--p2b-fonte-familia);
  --p2b-tipo-lead: var(--p2b-peso-light) 1.125rem/1.6 var(--p2b-fonte-familia);
  --p2b-tipo-corpo: var(--p2b-peso-regular) 1rem/1.6 var(--p2b-fonte-familia);
  --p2b-tipo-small: var(--p2b-peso-regular) 0.875rem/1.5 var(--p2b-fonte-familia);
  --p2b-tipo-caption: var(--p2b-peso-medium) 0.75rem/1.4 var(--p2b-fonte-familia);
  --p2b-tipo-eyebrow: var(--p2b-peso-semibold) 0.875rem/1.4 var(--p2b-fonte-familia);
  --p2b-eyebrow-tracking: 0.18em; /* caixa baixa — decisão do manual */

  /* --- Componente --- */
  --p2b-botao-raio: var(--p2b-raio-pill);
  --p2b-botao-altura-minima: 44px;
  --p2b-botao-padding-x: var(--p2b-espaco-xl);
  --p2b-input-raio: var(--p2b-raio-sm);
  --p2b-input-altura-minima: 44px;
  --p2b-card-raio: var(--p2b-raio-sm);
  --p2b-card-raio-destaque: var(--p2b-raio-lg);
  --p2b-card-padding: var(--p2b-espaco-lg);
}

/* Reduced motion: override global no nível de token (princípio 4).
   Animações que carregam estado (spinner) preservam duração via
   --p2b-duracao-preservada no próprio componente. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --p2b-duracao-instantanea: 0ms;
    --p2b-duracao-rapida: 0ms;
    --p2b-duracao-normal: 0ms;
    --p2b-duracao-moderada: 0ms;
    --p2b-duracao-lenta: 0ms;
  }
}
