/* Paleta clara com verdes e verdes-água suaves */
:root {
  --brand-green-600: #16a34a; /* tailwind green-600 */
  --brand-green-500: #22c55e; /* primary */
  --brand-green-400: #34d399;
  --brand-green-300: #3cdb76;
  --brand-emerald-300: #13a76c; /* aqua suave */
  --brand-emerald-200: #64cf9d;
  --brand-green-50: #ecfdf5; /* fundo muito claro */

  /* Alias para compatibilidade com páginas que usam --brand-primary */
  --brand-primary: var(--brand-green-500);
  --brand-primary-strong: var(--brand-green-600);

  --brand-hero-bg-gradient: linear-gradient(135deg, var(--brand-emerald-200) 0%, var(--brand-green-300) 100%);
  --brand-app-bg-gradient: linear-gradient(135deg, var(--brand-emerald-200) 0%, var(--brand-green-300) 100%);
}

/* Utilitários de tema */
.bg-brand-primary { background-color: var(--brand-green-500) !important; }
.text-brand-primary { color: var(--brand-green-500) !important; }
.text-brand-strong { color: #0f766e !important; /* teal-700 para títulos */ }
.border-brand-soft { border-color: var(--brand-green-300) !important; }
.bg-brand-soft { background-color: var(--brand-green-50) !important; }
.bg-brand-gradient { background: var(--brand-app-bg-gradient) !important; }
.bg-brand-gradient-soft { background: linear-gradient(135deg, #eafaf3 0%, #ffffff 100%) !important; }

/* Header e navegação */
header.bg-brand-primary { box-shadow: 0 8px 20px -8px rgba(34, 197, 94, 0.35); }

/* Hero de marca e imagem Liquigás */
.brand-hero { position: relative; overflow: hidden; }
.brand-media { 
  background: var(--brand-hero-bg-gradient);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 12px 28px -12px rgba(34, 197, 94, 0.35);
}
.brand-img-mobile { 
  width: 100%;
  height: auto;
  max-width: 660px; /* um pouco maior em telas médias */
  max-height: 260px;
}
@media (max-width: 640px) {
  .brand-img-mobile { max-height: 200px; }
}

/* Cartões e elementos */
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -10px rgba(0,0,0,0.12); }
.category-card { transition: transform 180ms ease, box-shadow 180ms ease; }
.category-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(34,197,94,0.25); }

/* Inputs e foco brand (fallback para Tailwind ring) */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35);
  border-color: var(--brand-green-300);
}

/* Botões possíveis (se necessário) */
.btn-brand { 
  background-color: var(--brand-green-500);
  color: #fff;
}
.btn-brand:hover { background-color: var(--brand-green-600); }

/* Compat: botões genéricos que referenciam --brand-primary */
button.btn-primary, .btn-primary {
  background-color: var(--brand-primary);
  color: #fff;
}
button.btn-primary:hover, .btn-primary:hover {
  background-color: var(--brand-primary-strong);
}

/* Footer sutilmente integrado */
footer { background-image: linear-gradient(180deg, rgba(13,148,136,0.08) 0%, rgba(0,0,0,0) 24%); }