:root {
  --primary-color: #7b1914; /* Red 500 */
  --accent-color: #733936; /* Red 300 */
  --text-color-light: white;
  --text-color-dark: black;
  --danger-color: #ff9800;
}

.mdl-layout__header {
  background-color: var(--primary-color);
}
#homepage-title-container,
#category-name-container,
#homepage-description,
#category-description-container,
#category-details-container p {
  color: var(--text-color-light);
}

.product-card .mdl-card__supporting-text h4,
.product-card .mdl-card__supporting-text p {
  color: var(--text-color-dark);
}

.category-button {
  background-color: var(--primary-color);
  color: var(--text-color-light);
  border: 1px solid var(--text-color-light);
}
.category-button.active {
  background-color: var(--accent-color);
  color: var(--text-color-light);
  border: 1px solid var(--text-color-light);
}

#scroll-to-top {
  background-color: var(--text-color-dark);
}

body {
  background-color: var(--accent-color);
}

header {
  background-color: var(--text-color-light);
}

header button svg {
  fill: var(--text-color-light);
}
#popup-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent overlay */
}

#cart-dialog .mdl-dialog__title {
  border-bottom: 1px solid #eee; /* Added border */
}
.cart-panel {
  background-color: var(--text-color-light);
}

.cart-item {
  border-bottom: 1px solid #eee;
}

#cart-subtotal .subtotal-label {
  color: #777;
}

#cart-subtotal .subtotal-amount {
  color: var(--primary-color);
}

#cart-button .mdl-badge[data-badge]::after {
  background-color: var(--primary-color);
}

.remove-from-cart {
  color: var(--danger-color);
}