/* Warm menu theme — cozy and roomy: cream/terracotta palette, generously rounded
   pill-shaped chips and cards, soft diffuse shadow instead of a hard border. Wider
   card gaps than classic give it a relaxed, unhurried feel. Structure and class names
   are untouched. */

:root {
  /* Darkened ~6% from the original #c85a1b. That original failed WCAG AA no matter which
     text color the buttons (add-to-basket, checkout) used — 4.26:1 with white, 4.44:1
     with black, both short of the 4.5:1 required. This is the minimum darkening that
     clears it with white text (4.72:1) while staying recognizably the same terracotta;
     every other use of --primary-color (headings, borders on the cream background) only
     gains contrast from the change. */
  --primary-color: #bc5519;
  --color-on-primary: #ffffff;
  --radius-lg: 22px;
  --radius-md: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(90, 50, 20, 0.08);
  --shadow-md: 0 8px 20px rgba(90, 50, 20, 0.14);
  /* Unhurried, soft — a touch slower than classic, easing out gently. */
  --transition-fast: 200ms ease-out;
  --transition-base: 320ms ease-out;
}

html {
  background-color: #fdf1e3;
}

body {
  color: #3a2a1d;
}

/* Page and section headings */
.main-container > div > h2,
.category-meal-container > h2 {
  color: #c85a1b;
}

/* Restaurant / menu chooser cards */
.main-container > div > div > a,
.resaurant,
.restaurantMenu {
  background-color: #fffaf3;
  border-color: #e7d3bd;
  color: #3a2a1d;
}

/* Meal cards — extra breathing room and a soft shadow instead of a crisp border */
.category-meal-container > div {
  gap: 2rem;
}
.meal-container {
  background-color: #fffaf3;
  border-color: #e7d3bd;
  color: #3a2a1d;
}

.meal-container > div:last-of-type > div > span {
  color: #2e1f14;
}

/* Category strip — the chip itself is styled on the swiper slide wrapper. */
html .swiper-slide:has(.category-slide) {
  background-color: #fffaf3;
  border-color: #e7d3bd;
}

.category-slide > span {
  color: #6b4a30;
}

.category-swiper-container.scrolledSwiper {
  background-color: #fdf1e3;
}

/* Basket and overlays.
   style.css sets these with the `background` shorthand inside two-class selectors, so
   these overrides use the same shorthand and an `html` prefix to outrank it without
   resorting to !important. */
html .basket-container,
html .basket-full-page,
html .basket-full-page.desktopView,
html .basket-full-page.mobileView {
  background: #fffaf3;
  color: #3a2a1d;
  border-color: #e7d3bd;
}

html .meal-full-page {
  background: #fffaf3;
  color: #3a2a1d;
}

html .scroll-to-top {
  background: #f0dcc6;
}

.createdBy,
.createdBy a {
  color: #8a6d55;
}