/* =============================================
   WM Trading — Foundations (camada de marca)
   ---------------------------------------------
   Primitivas REUTILIZÁVEIS construídas sobre os
   tokens de variables.css: tipografia, botões,
   formulários, ícones, reveal e utilitários.

   NÃO contém diagramação de página nem imagens.
   Use em qualquer página (home, LP, e-mails):
     variables.css → reset.css → foundations.css → [layout da página].css
   ============================================= */

/* ---------- TIPOGRAFIA BASE ---------- */
body {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text-dark);
  background: var(--color-bg-white);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: var(--font-primary); line-height: 1.15; color: var(--color-text-dark); }
/* Títulos grandes em peso leve — assinatura da marca WM */
.t-display { font-size: var(--fs-2xl); font-weight: var(--fw-light); line-height: 1.12; }
.t-h2      { font-size: var(--fs-xl);  font-weight: var(--fw-light); }
.t-h3      { font-size: var(--fs-lg);  font-weight: var(--fw-semibold); }
.t-lead    { font-size: var(--fs-md);  font-weight: var(--fw-regular); line-height: 1.7; }
.t-body    { font-size: var(--fs-sm);  line-height: 1.7; }
.text-primary { color: var(--color-primary); }
.text-white   { color: var(--color-text-white); }
.text-muted   { color: var(--color-text-muted); }
strong { font-weight: var(--fw-semibold); }

/* ---------- LAYOUT PRIMITIVO (container) ---------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* ---------- BOTÕES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:hover { background: #e04700; }
.btn-lg { padding: 14px 26px; font-size: var(--fs-base); }
.btn-block { width: 100%; }
.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; }
.btn-white { background: #fff; color: var(--color-primary); }
.btn-white:hover { background: #f3f3f3; color: #e04700; }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--color-primary); transition: opacity var(--transition);
}
.link-arrow:hover { opacity: 0.7; }

/* ---------- ÍCONES (convenção) ---------- */
.ico {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* selo de ícone — quadrado laranja com glifo branco (assinatura WM) */
.ico-badge {
  width: 48px; height: 48px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  color: #fff;
}
.ico-badge svg { width: 22px; height: 22px; stroke: #fff; }

/* ---------- FORMULÁRIOS ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-text-dark); }
.field label .req { color: var(--color-primary); }
.field input, .field select, .field textarea {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  padding: 12px 14px;
  border: 1.5px solid #e3e3e3;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-text-dark);
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field textarea { resize: vertical; min-height: 88px; }
.field input::placeholder, .field textarea::placeholder { color: #b3b3b3; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(252,80,0,0.12);
}

/* ---------- REVEAL (entrada com blur) ----------
   À prova de falhas: o estado oculto só vale quando o JS está ativo
   (html.js). Sem JS / se o script falhar, o conteúdo aparece normalmente. */
html.js .reveal {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(20px);
  transition:
    opacity 0.65s ease var(--reveal-delay, 0s),
    filter 0.65s ease var(--reveal-delay, 0s),
    transform 0.65s ease var(--reveal-delay, 0s);
}
html.js .reveal.revealed { opacity: 1; filter: blur(0); transform: none; }

/* ---------- UTILITÁRIOS ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-primary);
}
.eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.surface { background: var(--color-bg-white); }
.surface-light { background: var(--color-bg-light); }
.surface-dark { background: var(--color-bg-dark); color: #fff; }
.surface-primary { background: var(--color-primary); color: #fff; }