/* Shared light/dark pairs. Photos and maps keep their original colors. */
:root {
  --action-bg: #24392f;
  --action-text: #fffcf6;
  --action-hover: #36503d;
  --on-accent: #fff;
  --header-surface: rgba(245, 241, 233, .97);
  --focus-color: #985139;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #303a36;
  --surface: #39453f;
  --surface-raised: #414f47;
  --surface-soft: #414f45;
  --text: #f2f0e8;
  --muted: #c1cbbf;
  --muted-strong: #dce1d6;
  --accent: #f0b4b7;
  --accent-deep: #ffd4d5;
  --bronze: #f0b4b7;
  --success: #aed9b7;
  --border: #56665a;
  --border-strong: #8c9e90;
  --shadow: 0 12px 36px rgba(17, 28, 22, .16);
  --action-bg: #c4d4b7;
  --action-text: #24392f;
  --action-hover: #d8e4cf;
  --on-accent: #303a36;
  --header-surface: rgba(48, 58, 54, .97);
  --focus-color: #e9c5a4;
}

/* A surface and its foreground always change together, including old page rules. */
.button--primary, .content-page .button--primary, .restaurant-body .button--primary {
  background: var(--action-bg); color: var(--action-text); border-color: var(--action-bg);
}
.button--secondary, .button--quiet,
.content-page .button--secondary, .content-page .button--quiet,
.restaurant-body .button--secondary {
  background: var(--surface); color: var(--text); border-color: var(--border-strong);
}
.view-all-restaurants { color: var(--action-text); background: var(--action-bg); border-color: var(--action-bg); }
.view-all-restaurants small, .view-all-restaurants > .icon { color: inherit; }
.filter-count, .bottom-navigation__badge, .header-search-compact strong { color: var(--on-accent); background: var(--accent); }
::selection { color: var(--on-accent); background: var(--accent); }
:focus-visible { outline-color: var(--focus-color); }

.header-utilities { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: 50%;
  color: var(--text); background: var(--surface); cursor: pointer;
  touch-action: manipulation; transition: background-color 160ms ease, border-color 160ms ease;
}
.theme-toggle .icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: block; }
[data-theme="dark"] .theme-toggle__moon { display: none; }
.theme-toggle:active { background: var(--surface-soft); }
.site-header--over-hero:not(.is-scrolled) .theme-toggle,
.detail-header--over-hero:not(.is-scrolled) .theme-toggle {
  color: #fff9ef; background: rgba(19, 35, 26, .5); border-color: rgba(255, 249, 239, .55);
}
.explore-body:has(.explore-hero--gallery) .site-header .theme-toggle {
  color: var(--text); background: var(--surface); border-color: var(--border-strong);
}
.header-search-compact { right: 108px; font-size: .76rem; gap: 6px; }
.site-header--over-hero.is-scrolled, .detail-header--over-hero.is-scrolled,
.explore-body:has(.explore-hero--gallery) .site-header { background: var(--header-surface); }

/* Dark content surfaces. The tone is deliberately mid-dark, never pure black. */
html[data-theme="dark"] { scrollbar-color: #8c9e90 var(--bg); }
[data-theme="dark"] .explore-hero--gallery .explore-intro h1 em { color: #c3d0b7; }
[data-theme="dark"] .search-box { background: var(--surface); border-color: var(--border-strong); box-shadow: none; }
[data-theme="dark"] .search-box input::placeholder,
[data-theme="dark"] .sheet-search input::placeholder { color: var(--muted); }
[data-theme="dark"] .search-box:focus-within, [data-theme="dark"] .sheet-search:focus-within {
  border-color: var(--focus-color); box-shadow: 0 0 0 2px rgba(233,197,164,.25);
}
[data-theme="dark"] .explore-hero--gallery .filter-button,
[data-theme="dark"] .explore-hero--gallery .filter-chip.is-active,
[data-theme="dark"] .filter-options input:checked + span {
  background: var(--action-bg); color: var(--action-text); border-color: var(--action-bg);
}
[data-theme="dark"] .favorite-button,
[data-theme="dark"] .favorite-button.is-saved { background: var(--surface); border-color: var(--border-strong); }
[data-theme="dark"] .restaurant-card__meta [data-distance] { color: var(--muted-strong); }
[data-theme="dark"] .restaurant-grid--cinema, [data-theme="dark"] .photo-rail { scrollbar-color: #8c9e90 #414f45; }
[data-theme="dark"] .bottom-navigation, [data-theme="dark"] .sticky-actions {
  border-color: var(--border-strong); background: var(--header-surface); box-shadow: var(--shadow);
}
[data-theme="dark"] .bottom-navigation__indicator { background: #52634f; }
[data-theme="dark"] .bottom-navigation__item { color: var(--muted); }
[data-theme="dark"] .bottom-navigation__item.is-active,
[data-theme="dark"] .bottom-navigation__item.is-active .icon { color: #fff9ef; }
[data-theme="dark"] .bottom-sheet__handle { background: #a9b7a7; }
[data-theme="dark"] .nearby-filter__button,
[data-theme="dark"] .nearby-filter__button.is-active { color: var(--text); background: var(--surface-soft); border-color: var(--border-strong); }
[data-theme="dark"] .nearby-filter__icon { color: #e0ead5; background: #51624e; }
[data-theme="dark"] .nearby-filter__copy small, [data-theme="dark"] .nearby-filter__arrow { color: var(--muted-strong); }
[data-theme="dark"] .essentials-grid > .essential-card--spend { background: var(--surface-soft); border-color: var(--border); }
[data-theme="dark"] .essential-card__icon, [data-theme="dark"] .amenities-list .icon { color: #c1d4b3; }
[data-theme="dark"] .essentials-grid small, [data-theme="dark"] .essentials-grid small:first-of-type,
[data-theme="dark"] .essential-card__find, [data-theme="dark"] .essential-card__find span { color: var(--muted-strong); border-color: var(--border); }
[data-theme="dark"] .contact-panel { background: var(--surface-soft); border-color: var(--border); }
[data-theme="dark"] .contact-panel__copy > p { color: var(--muted-strong); }
[data-theme="dark"] .contact-phone { border-color: var(--border-strong); }
[data-theme="dark"] .contact-phone > .icon, [data-theme="dark"] .contact-phone small { color: var(--muted); }
[data-theme="dark"] .opening-hours-table tr.is-today { background: #465943; box-shadow: inset 3px 0 #bed3ae; }
[data-theme="dark"] .opening-hours-table th small { color: #d5e3c9; }
[data-theme="dark"] .restaurant-status--open,
[data-theme="dark"] .restaurant-status-text--open { color: #b7e5c2 !important; }
[data-theme="dark"] .restaurant-status--closing-soon,
[data-theme="dark"] .restaurant-status-text--closing-soon { color: #ffe0a0 !important; }
[data-theme="dark"] .restaurant-status--closed,
[data-theme="dark"] .restaurant-status-text--closed { color: #ffc4c5 !important; }
[data-theme="dark"] .restaurant-status--open { background: #354f3f; }
[data-theme="dark"] .restaurant-status--closing-soon { background: #584b32; }
[data-theme="dark"] .restaurant-status--closed { background: #624343; }
[data-theme="dark"] .android-app-promo__inner { background: var(--surface-soft); border-color: var(--border); }
[data-theme="dark"] .android-app-promo__icon, [data-theme="dark"] .android-app-promo__dismiss { color: var(--text); background: #52634f; }

@media (hover: hover) {
  .button--primary:hover, .content-page .button--primary:hover, .restaurant-body .button--primary:hover,
  .view-all-restaurants:hover { background: var(--action-hover); color: var(--action-text); border-color: var(--action-hover); }
  .button--secondary:hover, .button--quiet:hover,
  .content-page .button--secondary:hover, .content-page .button--quiet:hover,
  .restaurant-body .button--secondary:hover { background: var(--surface-soft); color: var(--text); border-color: var(--border-strong); }
  .theme-toggle:hover { border-color: var(--text); }
  [data-theme="dark"] .restaurant-card__link:hover { border-color: var(--border-strong); }
}
@media (max-width: 374px) {
  .header-search-compact { left: 48px; right: 104px; padding-inline: 8px; }
  .header-search-compact .icon { width: 17px; height: 17px; flex-basis: 17px; }
  .header-utilities { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}