/* Tema claro (5 colores) */
.palette-light {
  --color-bg: rgb(201, 201, 201);
  --color-bg-buy-button: rgb(0, 114, 153);
  --color-bg-add-button: rgb(0, 114, 153);
  --color-bg-highlight: rgb(0, 114, 153);
  --color-bg-button: rgb(201, 201, 201);
  --color-bg-element: rgb(236, 236, 236);
  --color-nav-element: rgb(0, 114, 153);
  --color-text: rgb(17, 17, 17);
  --color-nav-text: rgb(236, 236, 236);
  --color-text-button: rgb(236, 236, 236);
  --color-featured: rgb(230, 169, 64);
}

/* Tema claro (alto contraste) con tres colores */
.palette-light-contrast {
  --color-bg: rgb(252, 255, 255);
  --color-bg-button: rgb(2, 71, 95);
  --color-bg-element: rgb(252, 255, 255);
  --color-bg-buy-button: rgb(2, 71, 95);
  --color-nav-element: rgb(2, 71, 95);
  --color-text-button: rgb(252, 255, 255);
  --color-text: rgb(0, 0, 0);
  --color-nav-text: rgb(0, 0, 0);
  --color-featured: rgb(2, 71, 95);
}

/* Tema oscuro (5 colores) */
.palette-dark {
  --color-bg: rgba(36, 36, 36, 0.884);
  --color-bg-element: rgb(98, 98, 99);
  --color-bg-highlight: rgb(0, 114, 153);
  --color-bg-button: rgba(36, 36, 36, 0.884);
  --color-nav-element: rgb(21, 120, 170);
  --color-bg-buy-button: rgb(21, 120, 170);
  --color-bg-add-button: rgb(21, 120, 170);
  --color-text: rgb(212, 212, 212);
  --color-nav-text: rgb(212, 212, 212);
  --color-text-button: rgb(212, 212, 212);
  --color-featured: rgb(209, 87, 39);
}

/* Tema oscuro (alto contraste) con tres colores */
.palette-dark-contrast {
  --color-bg: rgba(52, 48, 48, 0.959);
  --color-bg-element: rgba(52, 48, 48, 0.959);
  --color-bg-button: rgb(21, 120, 170);
  --color-bg-buy-button: rgb(21, 120, 170);
  --color-nav-element: rgb(21, 120, 170);
  --color-text: rgb(255, 255, 255);
  --color-nav-text: rgb(255, 255, 255);
  --color-text-button: rgb(255, 255, 255);
  --color-featured: rgb(233, 13, 13);
}