/* Primary colors */

:root {
  --espresso: #4B2E19;   
  --latte:    #F5E6D3;   
  --accent:   #C68B59;
  --cream:    #FFF7EF;  
}

* { box-sizing: border-box; }

body {
  background-color: var(--latte);
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

.bg-espresso {
  background-color: var(--espresso) !important;
}

.text-espresso {
  color: var(--espresso) !important;
}

.bg-latte {
  background-color: var(--latte) !important;
}

.text-latte {
  color: var(--latte) !important;
}

.text-accent {
  color: var(--accent) !important;
}

.bg-accent {
  background-color: var(--accent) !important;
}

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

/* Navbar */

.nav-link {
  color: var(--latte) !important; 
  transition: color 0.2s ease-in-out;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--accent) !important; 
}

/* Index.html main */

.index-img {
  max-height: 300px;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.index-img:hover {
  transform: scale(1.05);
}

.border-style {
  border-color: var(--latte) !important;
  border-style: dashed !important;
}

/* products.html main */

.product-card {
  border: none;
  border-radius: 0.75rem;
  background-color: var(--cream);
}

.product-img {
  max-height: 180px;
  object-fit: cover;
}

.price-tag {
  color: var(--espresso);
  font-size: 1rem;
}

.btn-outline-espresso {
  color: var(--espresso);
  border-color: var(--espresso);
  background-color: transparent;
  transition: all 0.2s ease-in-out;
}

.btn-outline-espresso:hover,
.btn-outline-espresso:focus {
  color: var(--latte);
  background-color: var(--espresso);
  border-color: var(--espresso);
}

/* about.html main */

.contact-card {
  border: none;
  border-radius: 0.75rem;
  background-color: var(--cream);
}

.contact-avatar {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
}

.contact-role {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.contact-link {
  color: var(--espresso);
  text-decoration: none;
}

.contact-link:hover,
.contact-link:focus {
  text-decoration: underline;
}