/* Identidade visual — 30 Mixes Naturais para Hamsters
   Sobrescreve os tokens da folha compilada (laser.css). */
:root,
:host {
  --color-brand-dark: #3f4a2c; /* verde folha escuro (texto) */
  --color-brand-navy: #3f4a2c;
  --color-brand-red: #c0622f; /* terracota (barra de urgência / seções fortes) */
  --color-brand-gold: #e6b84f; /* amarelo mostarda suave */
  --color-brand-gold-dark: #c8912c;
  --color-brand-green: #6f8c3c;
  --color-brand-teal: #6f8c3c; /* verde oliva */
  --color-brand-teal-dark: #556d2b;
  --color-brand-teal-light: #ecefd8; /* creme esverdeado */
  --color-green-600: #6f8c3c; /* CTA principal */
  --color-gray-100: #f6efe1;
  --color-gray-200: #e9dfcb;
}

/* Fundo creme/bege claro no lugar do branco puro */
.page-wrap,
.page-wrap.bg-white {
  background-color: #fbf6ec;
}

.page-wrap .bg-white {
  background-color: #fffdf8;
}

/* Textura natural sutil (palha/papel) atrás do hero */
.page-wrap > section:first-of-type {
  background-image:
    radial-gradient(circle at 12% 12%, rgba(111, 140, 60, 0.1), transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(192, 98, 47, 0.1), transparent 40%);
}

/* Utilitários da seção "Veja como cada mix é organizado" */
.bg-brand-teal { background-color: var(--color-brand-teal) !important; }
.bg-brand-teal\/10 { background-color: color-mix(in srgb, var(--color-brand-teal) 12%, transparent) !important; }
.bg-brand-red\/10 { background-color: color-mix(in srgb, var(--color-brand-red) 12%, transparent) !important; }
.bg-brand-gold\/15 { background-color: color-mix(in srgb, var(--color-brand-gold) 20%, transparent) !important; }
.bg-brand-green\/10 { background-color: color-mix(in srgb, var(--color-brand-green) 12%, transparent) !important; }
.bg-brand-gold\/60 { background-color: color-mix(in srgb, var(--color-brand-gold) 60%, transparent) !important; }

.max-w-sm { max-width: 24rem; }

/* Seção de bônus — utilitários ausentes na folha compilada */
.bg-brand-teal-dark { background-color: var(--color-brand-teal-dark) !important; }
.ring-brand-gold\/30 { --tw-ring-color: color-mix(in srgb, var(--color-brand-gold) 30%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand-gold) 30%, transparent), 0 4px 6px -1px rgba(0,0,0,.08); }
.opacity-\[0\.07\] { opacity: .07; }
.size-3\.5 { width: .875rem; height: .875rem; }
@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Seção de planos (oferta) */
.border-brand-teal\/20 { border-color: color-mix(in srgb, var(--color-brand-teal) 20%, transparent) !important; }
.border-brand-red\/30 { border-color: color-mix(in srgb, var(--color-brand-red) 30%, transparent) !important; }
.border-brand-teal\/30 { border-color: color-mix(in srgb, var(--color-brand-teal) 30%, transparent) !important; }
.border-brand-gold\/40 { border-color: color-mix(in srgb, var(--color-brand-gold) 40%, transparent) !important; }
.border-brand-teal-dark\/30 { border-color: color-mix(in srgb, var(--color-brand-teal-dark) 30%, transparent) !important; }
.border-brand-gold { border-color: var(--color-brand-gold) !important; }
.bg-brand-red\/5 { background-color: color-mix(in srgb, var(--color-brand-red) 6%, transparent) !important; }
.bg-brand-teal\/5 { background-color: color-mix(in srgb, var(--color-brand-teal) 6%, transparent) !important; }
.bg-brand-gold\/10 { background-color: color-mix(in srgb, var(--color-brand-gold) 12%, transparent) !important; }
.bg-brand-teal-light\/50 { background-color: color-mix(in srgb, var(--color-brand-teal-light) 55%, transparent) !important; }
.bg-brand-gold { background-color: var(--color-brand-gold) !important; }
.bg-brand-red { background-color: var(--color-brand-red) !important; }
.bg-brand-dark { background-color: var(--color-brand-dark) !important; }
.text-brand-gold-dark { color: var(--color-brand-gold-dark) !important; }

/* Fundo de página unificado para todas as seções claras */
.page-wrap .bg-page,
.page-wrap.bg-page,
.bg-page {
  background-color: #fbf6ec !important;
}
.text-brand-teal-dark { color: var(--color-brand-teal-dark) !important; }
.hover\:bg-brand-teal-dark:hover { background-color: var(--color-brand-teal-dark) !important; }
.max-w-md { max-width: 28rem; }
.rounded-3xl { border-radius: 1.5rem; }
.pt-9 { padding-top: 2.25rem; }
.tracking-wide { letter-spacing: .025em; }