/* Ember uses the existing theme. Alternative palettes affect the customer site only. */
html[data-restaurant-theme='midnight'] {
  --theme-page: #111719;
  --theme-surface: #1d2529;
  --theme-soft: #293238;
  --theme-ink: #f3ead9;
  --theme-muted: #b4b9b7;
  --theme-line: #3c474c;
  --theme-accent: #e6bd78;
  --theme-button-ink: #211b11;
  --theme-display: Caprasimo, Georgia, serif;
  --theme-radius: 14px;
  color-scheme: dark;
}

html[data-restaurant-theme='bistro'] {
  --theme-page: #f5f7fa;
  --theme-surface: #ffffff;
  --theme-soft: #e8eef4;
  --theme-ink: #20354b;
  --theme-muted: #596d7d;
  --theme-line: #d7e0e8;
  --theme-accent: #37678d;
  --theme-button-ink: #ffffff;
  --theme-display: Georgia, 'Times New Roman', serif;
  --theme-radius: 6px;
  color-scheme: light;
}

html:is([data-restaurant-theme='midnight'], [data-restaurant-theme='bistro']) {
  --ink: var(--theme-ink);
  --blue: var(--theme-accent);
  --green: var(--theme-accent);
  --orange: var(--theme-accent);
  --line: var(--theme-line);
  --pale: var(--theme-soft);
  color: var(--theme-ink);
  background: var(--theme-page);
}

/* Keep the same responsive menu and order flow across all three designs. */
html:is([data-restaurant-theme='midnight'], [data-restaurant-theme='bistro']) {
  body {
    background: var(--theme-page);
    color: var(--theme-ink);
  }
  header,
  dialog,
  .product {
    background: var(--theme-surface);
    color: var(--theme-ink);
    border-color: var(--theme-line);
  }
  .brand,
  .footer-brand,
  .section-top h1,
  .results-heading h2,
  .product h3,
  dialog h2 {
    font-family: var(--theme-display);
    color: var(--theme-ink);
  }
  .brand-icon {
    background: var(--theme-accent);
    color: var(--theme-button-ink);
  }
  .brand small,
  .section-top p,
  .location-bar small,
  .location-bar strong > span,
  .results-heading > span,
  .veg-toggle,
  .product p,
  dialog p,
  .eyebrow,
  footer,
  footer p,
  .categories button,
  .header-right > button {
    color: var(--theme-muted);
  }
  .location-bar strong,
  .price,
  .bill.total,
  .basket-line strong,
  header nav .active {
    color: var(--theme-ink);
  }
  .location-bar,
  .results-heading,
  footer,
  .basket-line,
  .bill.total {
    border-color: var(--theme-line);
  }
  .search,
  .location-bar button,
  .category-picture,
  .food-image,
  dialog input[type='number'],
  dialog input[type='text'],
  dialog textarea,
  dialog select {
    background: var(--theme-surface);
    color: var(--theme-ink);
    border-color: var(--theme-line);
  }
  .search input {
    color: var(--theme-ink);
  }
  .search input::placeholder {
    color: var(--theme-muted);
  }
  .offer-banner,
  .notice {
    background: var(--theme-soft);
    color: var(--theme-ink);
  }
  .offer-banner h2,
  .offer-banner p,
  .offer-banner button,
  .offer-symbol,
  .notice {
    color: var(--theme-ink);
  }
  .categories button[aria-selected='true'] {
    color: var(--theme-ink);
    border-bottom-color: var(--theme-accent);
  }
  .categories button[aria-selected='true'] .category-picture {
    border-color: var(--theme-accent);
    background: var(--theme-soft);
  }
  .product {
    border-radius: var(--theme-radius);
    box-shadow: 0 4px 16px #00000008;
  }
  .add,
  .add:hover,
  .primary,
  .primary:hover,
  .mobile-basket,
  .mobile-basket:hover {
    background: linear-gradient(
      170deg,
      var(--theme-accent),
      color-mix(in srgb, var(--theme-accent), black 12%)
    );
    color: var(--theme-button-ink);
    border-color: color-mix(in srgb, var(--theme-accent), black 20%);
    box-shadow:
      0 3px 0 color-mix(in srgb, var(--theme-accent), black 30%),
      inset 0 1px 0 #ffffff30;
  }
  .cart-icon > span,
  .quantity button {
    background: var(--theme-soft);
    color: var(--theme-ink);
    border-color: var(--theme-line);
  }
  .close {
    background: var(--theme-surface);
    color: var(--theme-ink);
  }
  .subtle,
  .option span,
  .success-mark {
    color: var(--theme-accent);
  }
  .bill {
    color: var(--theme-muted);
  }
  .option {
    color: var(--theme-ink);
    border-color: var(--theme-line);
  }
  .live-dot {
    background: var(--theme-accent);
  }
  .install-guide-icon {
    background: var(--theme-soft);
    color: var(--theme-accent);
  }
  #toast {
    background: var(--theme-ink);
    color: var(--theme-page);
  }
  @media (max-width: 650px) {
    .menu-tools {
      background: var(--theme-page);
    }
    body > header nav {
      background: color-mix(in srgb, var(--theme-surface), transparent 7%);
      border-color: var(--theme-line);
    }
    body > header nav a,
    body > header nav button,
    body > header nav #install-bottom {
      color: var(--theme-muted);
    }
    body > header nav .active {
      background: var(--theme-soft);
      color: var(--theme-accent);
    }
    body > header nav a:active,
    body > header nav button:active {
      background: var(--theme-soft);
    }
  }
}