/* ======================================================
   BF WEST - GLOBAL CSS & PALETA DE CORES DA MARCA
   ====================================================== */

:root {
  /* Cores Principais do Logo */
  --bf-bg-cream: #F6EAD8;       /* Fundo creme/areia do logo */
  --bf-brown: #2C1A11;          /* Marrom escuro/café das letras BF */
  --bf-brown-light: #4A3225;    /* Marrom para estados de hover */
  --bf-gold: #C5A262;           /* Dourado da estrela/detalhes */
  --bf-green: #006B3F;          /* Verde da pincelada (Botões / Comprar) */
  --bf-green-hover: #004D2D;    /* Verde para hover */

  /* Neutros e Base */
  --bf-white: #FFFFFF;
  --bf-gray-light: #F9F7F5;
  --bf-gray-border: #E5DEC9;
  --bf-text-dark: #2C1A11;      /* Usando o marrom escuro como cor padrão do texto */
  --bf-text-muted: #7A6B63;

  /* Tipografia */
  --font-heading: 'Georgia', 'Times New Roman', serif; /* Elegante para títulos */
  --font-body: 'Segoe UI', Roboto, sans-serif;         /* Leitura limpa para mobile */
}

/* Reset Básico */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background-color: var(--bf-gray-light);
  color: var(--bf-text-dark);
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, .brand-title {
  font-family: var(--font-heading);
  color: var(--bf-brown);
  font-weight: 700;
}

/* --- Botões no Padrão da Marca --- */

/* Botão Principal de Compra (Verde da Pincelada) */
.btn-primary {
  background-color: var(--bf-green);
  color: var(--bf-white);
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background-color 0.3s ease, transform 0.1s ease;
}

.btn-primary:hover {
  background-color: var(--bf-green-hover);
}

.btn-primary:active {
  transform: scale(0.98);
}

/* Botão Secundário / Detalhes (Marrom Café) */
.btn-secondary {
  background-color: var(--bf-brown);
  color: var(--bf-bg-cream);
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-secondary:hover {
  background-color: var(--bf-brown-light);
}

/* --- Badges & Destaques --- */
.badge-gold {
  background-color: var(--bf-gold);
  color: var(--bf-white);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.bg-cream {
  background-color: var(--bf-bg-cream);
}

.border-brand {
  border: 1px solid var(--bf-gray-border);
}