:root {
  --cream: #f6f4eb;
  --olive-green: #a3b18a;
  --warm-brown: #ddb892;
  --dark-brown: #4b3f35;
  --text-dark: #2f2f2f;
  --white: #ffffff;
  --bs-blue:#ddb892;
  --bs-primary: #ddb892;
}

/* === Общи === */
body {
  background-color: var(--white) !important;
  color: var(--text-dark) !important;
  font-family: "Poppins", sans-serif;
}

/* === Navbar === */
.navbar-dark.bg-dark {
  background-color: var(--dark-brown) !important;
}
.navbar-brand {
  color: var(--warm-brown) !important;
  font-weight: 700;
}
.nav-link {
  color: #fff !important;
  transition: color 0.2s ease;
}
.nav-link:hover {
  color: var(--olive-green) !important;
}

/* === Hero === */
.hero {
  text-align: center;
  padding: 100px 20px;
  background-color: var(--cream);
  color: var(--dark-brown);
}
.hero h1 {
  color: var(--dark-brown);
}
.hero .btn {
  font-weight: 600;
}

/* === Buttons === */
.btn-primary {
  background-color: var(--olive-green) !important;
  border-color: var(--olive-green) !important;
  color: var(--dark-brown) !important;
}
.btn-primary:hover {
  background-color: var(--warm-brown) !important;
  border-color: var(--warm-brown) !important;
  color: #fff !important;
}
.btn-warning {
  background-color: var(--warm-brown) !important;
  border-color: var(--warm-brown) !important;
  color: #fff !important;
}
.btn-success {
  background-color: var(--olive-green) !important;
  border-color: var(--olive-green) !important;
  color: var(--dark-brown) !important;
}

/* === Cards === */
.card {
  border: 1px solid var(--olive-green) !important;
  box-shadow: 0 4px 10px rgba(75, 63, 53, 0.15);
}
.card-title {
  color: var(--dark-brown);
}
.card-text {
  color: var(--text-dark);
}

/* === Категории === */
.category-card {
  background-color: #fff;
  border: 2px solid var(--olive-green);
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  color: var(--dark-brown);
}
.category-card:hover {
  background-color: var(--olive-green);
  color: #fff;
  transform: translateY(-5px);
}

/* === Forms === */
.form-control,
.form-select {
  border: 1px solid var(--olive-green) !important;
  background-color: #fff !important;
  color: var(--text-dark) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--warm-brown) !important;
  box-shadow: 0 0 0 0.25rem rgba(221, 184, 146, 0.25) !important;
}

/* === Footer === */
.bg-dark{
  background-color: var(--dark-brown) !important;
  color: #fff !important;
}
footer {
  background-color: var(--dark-brown) !important;
  color: #fff !important;

}

footer a {
  color: var(--warm-brown);
}
footer a:hover {
  color: var(--olive-green);
}