:root {
  --bg-cream-main: #FAF8F5;
  --bg-cream-card: #FFFFFF;
  --bg-cream-accent: #F2ECE1;
  --border-cream: #E6DFD3;
  --text-primary: #2C2825;
  --text-muted: #78716A;
  --accent-dark: #231F1D;
}

body {
  background-color: var(--bg-cream-main);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Navbar */
.navbar-creamy {
  background-color: rgba(250, 248, 245, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-cream);
}

/* Cards & Containers */
.card-creamy {
  background-color: var(--bg-cream-card);
  border: 1px solid var(--border-cream);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(44, 40, 37, 0.03);
  transition: all 0.2s ease-in-out;
}

.card-creamy:hover {
  border-color: #D6CCC0;
}

/* Buttons */
.btn-creamy-primary {
  background-color: var(--accent-dark);
  color: #FAF8F5;
  border: 1px solid var(--accent-dark);
  border-radius: 8px;
  font-weight: 500;
  padding: 0.5rem 1.25rem;
}

.btn-creamy-primary:hover {
  background-color: #3D3734;
  color: #FFFFFF;
}

.btn-creamy-secondary {
  background-color: var(--bg-cream-accent);
  color: var(--text-primary);
  border: 1px solid var(--border-cream);
  border-radius: 8px;
  font-weight: 500;
}

.btn-creamy-secondary:hover {
  background-color: #E8E0D2;
  color: var(--text-primary);
}

/* Badges & Pills */
.badge-creamy {
  background-color: var(--bg-cream-accent);
  color: var(--text-primary);
  border: 1px solid var(--border-cream);
  font-weight: 500;
}

/* Avatar Circle */
.avatar-circle {
  width: 32px;
  height: 32px;
  background-color: var(--bg-cream-accent);
  color: var(--text-primary);
  border: 1px solid var(--border-cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
}

.form-control-creamy {
  background-color: #FFFFFF;
  border: 1px solid var(--border-cream);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  font-size: 0.9rem;
}

.form-control-creamy:focus {
  border-color: #B5AA9D;
  box-shadow: 0 0 0 3px rgba(35, 31, 29, 0.06);
  background-color: #FFFFFF;
  color: var(--text-primary);
}

.form-check-input-creamy:checked {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
}

.form-check-input-creamy:focus {
  box-shadow: 0 0 0 3px rgba(35, 31, 29, 0.06);
  border-color: var(--border-cream);
}