/* ============================================================
   BeduinoNode — tokens de design
   Importar antes do CSS da página.
   ============================================================ */

:root {
  /* Cores */
  --bn-tinta: #1F1F23;
  --bn-verde: #0F8A5F;          /* Verde Oásis: ação e destaque */
  --bn-verde-escuro: #0C6B4A;   /* hover / ativo */
  --bn-verde-profundo: #0B3B2C; /* fundos escuros */
  --bn-verde-claro: #3ECF8E;    /* verde sobre fundos escuros */
  --bn-areia: #EBCB93;          /* detalhe raro */
  --bn-duna: #F7F4EE;           /* fundo claro padrão */
  --bn-branco: #FFFFFF;

  /* Tipografia */
  --bn-fonte-titulo: 'Poppins', system-ui, -apple-system, sans-serif;
  --bn-fonte-texto: 'Inter', system-ui, -apple-system, sans-serif;

  /* Forma */
  --bn-raio: 14px;
  --bn-raio-pill: 999px;
  --bn-sombra: 0 8px 24px rgba(31, 31, 35, 0.08);

  /* Espaçamento (base 8) */
  --bn-espaco-1: 8px;
  --bn-espaco-2: 16px;
  --bn-espaco-3: 24px;
  --bn-espaco-4: 32px;
  --bn-espaco-6: 48px;
  --bn-espaco-8: 64px;
  --bn-espaco-12: 96px;
}

/* Base ------------------------------------------------------- */
body {
  background: var(--bn-duna);
  color: var(--bn-tinta);
  font-family: var(--bn-fonte-texto);
  line-height: 1.7;
}

h1, h2, h3 {
  font-family: var(--bn-fonte-titulo);
  font-weight: 600;
  line-height: 1.15;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; font-weight: 500; }

a { color: var(--bn-verde); }
a:hover { color: var(--bn-verde-escuro); }

/* Botões ----------------------------------------------------- */
.bn-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bn-verde);
  color: var(--bn-branco);
  border: 0;
  border-radius: var(--bn-raio-pill);
  padding: 14px 28px;
  font: 600 1rem var(--bn-fonte-titulo);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}
.bn-btn:hover { background: var(--bn-verde-escuro); color: var(--bn-branco); }

.bn-btn--contorno {
  background: transparent;
  color: var(--bn-tinta);
  box-shadow: inset 0 0 0 2px var(--bn-tinta);
}
.bn-btn--contorno:hover { background: var(--bn-tinta); color: var(--bn-branco); }

/* Ícones (sprite beduinonode-icones.svg, herdam a cor do texto) */
.bn-icone {
  width: 24px;
  height: 24px;
  color: currentColor;
  flex: none;
}

/* Seções ----------------------------------------------------- */
.bn-secao { padding: var(--bn-espaco-12) var(--bn-espaco-3); }

.bn-cartao {
  background: var(--bn-branco);
  border-radius: var(--bn-raio);
  box-shadow: var(--bn-sombra);
  padding: var(--bn-espaco-4);
}

/* Faixa escura (footer, seções de contraste) ------------------ */
.bn-escuro {
  background: var(--bn-verde-profundo);
  color: var(--bn-branco);
}
.bn-escuro a,
.bn-escuro .bn-destaque { color: var(--bn-verde-claro); }
.bn-escuro .bn-btn { background: var(--bn-verde-claro); color: var(--bn-verde-profundo); }
.bn-escuro .bn-btn:hover { background: var(--bn-branco); }