/* Paleta extraída de logo_sabores_mix.jpg */
:root {
  --sabores-cream: #F9F4EE;
  --sabores-cream-light: #FDFBF8;
  --sabores-cream-dark: #F0E9DF;
  --sabores-green: #3A442A;
  --sabores-green-dark: #2D351E;
  --sabores-green-light: #4F5C38;
  --sabores-brown: #8B5E3C;
  --sabores-brown-dark: #7A5030;
  --sabores-brown-light: #A67B52;
  --sabores-text: #2D351E;
  --sabores-text-muted: #6B6358;
  --sabores-card: #FFFFFF;
  --sabores-shadow: rgba(58, 68, 42, 0.08);
}

body {
  background-color: var(--sabores-cream);
  color: var(--sabores-text);
}

/* Utilidades semánticas */
.bg-brand-header { background-color: var(--sabores-green); }
.bg-brand-primary { background-color: var(--sabores-green); }
.bg-brand-primary:hover { background-color: var(--sabores-green-dark); }
.bg-brand-accent { background-color: var(--sabores-brown); }
.bg-brand-accent:hover { background-color: var(--sabores-brown-dark); }
.bg-brand-surface { background-color: var(--sabores-card); }
.bg-brand-muted { background-color: var(--sabores-cream-dark); }

.text-brand-primary { color: var(--sabores-green); }
.text-brand-accent { color: var(--sabores-brown); }
.text-brand-muted { color: var(--sabores-text-muted); }
.text-on-brand { color: var(--sabores-cream); }

.border-brand { border-color: var(--sabores-green); }
.border-brand-accent { border-color: var(--sabores-brown-light); }
.ring-brand:focus { outline: none; box-shadow: 0 0 0 2px var(--sabores-cream), 0 0 0 4px var(--sabores-brown); }

.link-back {
  color: var(--sabores-brown);
  font-weight: 500;
}
.link-back:hover { color: var(--sabores-brown-dark); }

.card {
  background: var(--sabores-card);
  border-radius: 1rem;
  box-shadow: 0 4px 14px var(--sabores-shadow);
}

.btn-primary {
  background-color: var(--sabores-green);
  color: var(--sabores-cream);
}
.btn-primary:hover { background-color: var(--sabores-green-dark); }

.btn-accent {
  background-color: var(--sabores-brown);
  color: var(--sabores-cream);
}
.btn-accent:hover { background-color: var(--sabores-brown-dark); }

.btn-cta {
  background: linear-gradient(135deg, var(--sabores-green) 0%, var(--sabores-green-light) 100%);
  color: var(--sabores-cream);
}
.btn-cta:hover {
  background: linear-gradient(135deg, var(--sabores-green-dark) 0%, var(--sabores-green) 100%);
}

.input-brand {
  border-color: var(--sabores-cream-dark);
}
.input-brand:focus {
  border-color: var(--sabores-brown-light);
  box-shadow: 0 0 0 2px rgba(139, 94, 60, 0.25);
}

.highlight-sales {
  background: linear-gradient(135deg, var(--sabores-green) 0%, var(--sabores-green-light) 100%);
  color: var(--sabores-cream);
}

.badge-pending { background-color: #c44; }

.product-thumb {
  background: linear-gradient(135deg, var(--sabores-cream) 0%, var(--sabores-cream-dark) 100%);
}