/* The map tiles remain unchanged; these tokens theme the surrounding interface. */
:root {
  color-scheme: light;
  --theme-bg: #f7f5f0;
  --theme-surface: #ffffff;
  --theme-panel: #fcece5;
  --theme-border: #dfded7;
  --theme-text: #202322;
  --theme-secondary: #656b67;
  --theme-accent: #b6442d;
  --theme-on-accent: #ffffff;
  --theme-ink: #233d36;
  --theme-on-ink: #ffffff;
  --ink: var(--theme-text);
  --muted: var(--theme-secondary);
  --green: var(--theme-accent);
  --dark: var(--theme-accent);
  --soft: var(--theme-panel);
  --line: var(--theme-border);
  --paper: var(--theme-surface);
  --page: var(--theme-bg);
  --canvas: var(--theme-bg);
  --mint: var(--theme-panel);
  --orange: var(--theme-accent);
}
.sushi-header-actions { display: flex; align-items: center; gap: 12px; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 10px; border: 1px solid var(--theme-border); border-radius: 9px;
  background: var(--theme-panel); color: var(--theme-accent); font: inherit; font-size: 11px; font-weight: 800;
  white-space: nowrap; cursor: pointer;
}
.theme-toggle:hover { background: var(--theme-panel); }
.theme-toggle:focus-visible { outline: 3px solid var(--theme-accent); outline-offset: 3px; }
.theme-toggle svg { display: block; width: 16px; height: 16px; flex: none; }
.theme-icon-sun { display: none !important; }
html[data-theme="dark"] .theme-icon-moon { display: none !important; }
html[data-theme="dark"] .theme-icon-sun { display: block !important; }
@media (max-width: 720px) {
  .sushi-header-actions { gap: 7px; }
  .theme-toggle { width: 34px; min-width: 34px; height: 34px; padding: 0; }
  .theme-toggle-label { display: none; }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #191c1b;
  --theme-surface: #242927;
  --theme-panel: #352b25;
  --theme-border: #39413d;
  --theme-text: #f1f1ea;
  --theme-secondary: #b3bdb7;
  --theme-accent: #ff967b;
  --theme-on-accent: #231c19;
  --theme-ink: #b9d3c4;
  --theme-on-ink: #14221a;
}
html[data-theme="dark"] body { background: var(--theme-bg); color: var(--theme-text); }
html[data-theme="dark"] .theme-toggle { background: var(--theme-panel); border-color: var(--theme-border); color: var(--theme-accent); }
html[data-theme="dark"] .theme-toggle:hover { background: var(--theme-panel); }
html[data-theme="dark"] :is(.map-overlay, .leaflet-popup-content-wrapper) { color: var(--theme-text); }

/* Main surfaces and boundaries. */
html[data-theme="dark"] :is(.topbar, .header, .explorer, .sidebar, .map-toolbar, .explorer-foot,
  .detail-panel, .detail-topbar, .detail-tabs, .detail-bottom, .modal, .hero-card, .quick-answer,
  .faq-section, .step, .extra-region-menu, .extra-region-menu button, .return-essentials-grid > div,
  .check-items label, .trip-journey-links a, .discovery-links a, .fact-list > div,
  .side-nav .side-map, .faq-side .side-map, .mobile-nav a, .faq-tabs a) {
  background: var(--theme-surface); border-color: var(--theme-border); color: var(--theme-text);
}
html[data-theme="dark"] :is(.controls, .category-bar, .destination-bar, .list-footer, .detail-section,
  .detail-tabs, .detail-topbar, .detail-bottom, .faq-section-head, .answer-block + .answer-block,
  .snapshot-heading, .fact-list > div + div, .reviews-section, .review-item, .clinic-card) {
  border-color: var(--theme-border);
}
html[data-theme="dark"] :is(.search-wrap, .place-filters, .destination-bar, .discovery, .guide,
  .trip-journey, .return-essentials, .detail-return, .place-snapshot, .review-structured,
  .experience-guide, .care-fact, .care-fact.known, .request-phrase, .prepare-box, .path-grid > div,
  .checklist, .fact-list, .note-box, .document-cards > div, .examples > div, .rule-card, .cold-box,
  .place-fact, .place-photo-empty, .place-photo-fallback, .place-no-photo) {
  background: var(--theme-panel); border-color: var(--theme-border); color: var(--theme-text);
}
html[data-theme="dark"] :is(.search-wrap input, .form-grid input, .form-grid select,
  .field-block input, .field-block textarea, .destination-bar select, .map-style-picker select,
  .geocode-results button) {
  background: var(--theme-surface); border-color: var(--theme-border); color: var(--theme-text);
}
html[data-theme="dark"] .search-wrap input { background: transparent; }
html[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--theme-secondary); }
html[data-theme="dark"] :is(.clinic-card:hover, .clinic-card.selected, .region:hover,
  .extra-region-menu button:hover, .detail-topbar button:hover, .search-wrap:focus-within) {
  background: var(--theme-panel); border-color: var(--theme-border);
}
html[data-theme="dark"] .region-group + .region-group { border-color: var(--theme-border); }

/* Text and interactive controls. */
html[data-theme="dark"] :is(.top-link, .header-guide, .brand-caption, .intro-copy p, .sort-label,
  .region, .region-caption, .category-description, .check-label, .card-jp, .card-address, .card-detail,
  .card-utility, .review-summary, .list-footer, .map-style-picker, .hero-copy > p, .hero-meta,
  .faq-hero > div > p, .faq-date, .faq-section-head p, .answer-block, .answer-block p,
  .faq-side > a, .side-nav > a, .step-intro, .step-body, .step-body p, .place-jp,
  .place-rating, .detail-topbar strong, .detail-section p, .info-row, .snapshot-row span,
  .place-snapshot > p, .return-essentials-grid p, .return-essentials-note, .detail-return p,
  .review-item p, .reviews-explainer, .evidence-section ul, .document-cards p, .document-cards small,
  .quick-answer a small, .trip-journey-head span, .trip-selected, .discovery small, footer) {
  color: var(--theme-secondary);
}
html[data-theme="dark"] :is(.place-name, .detail-section h3, .detail-tabs button[aria-selected="true"],
  .snapshot-heading b, .snapshot-row strong, .return-essentials-heading h2, .return-essentials-grid strong,
  .detail-return strong, .answer-block h3, .answer-block strong, .answer-lead, .quick-answer a b,
  .document-cards b, .examples b, .rule-card > b, .check-items label, .journey-steps b,
  .request-phrase p[lang="ja"], .care-fact-value, .reviews-heading strong, .region-group-title,
  .form-grid label, .field-block, .input-title, .stars-field legend) {
  color: var(--theme-text);
}
html[data-theme="dark"] :is(.journey-lead, .journey-steps p, .place-source-status) { color: var(--theme-secondary) !important; }
html[data-theme="dark"] :is(.journey-sources a, .snapshot-row a, .request-guide-link, .step-source,
  .place-source-links a, .info-copy a, .inline-copy, .guide a, .side-nav a:hover, .faq-side a:hover,
  .return-essentials a, .detail-return a, .source-line a, .note-box a, .document-cards a,
  .card-utility b, .hero h1 em, .faq-hero h1 em, h1 span) { color: var(--theme-accent); }
html[data-theme="dark"] :is(.region.active, .place-filter.active, .badge, .card-num, .journey-number,
  .journey-heading > span, .trip-journey-links a > span, .faq-number, .hero-card li > span,
  .experience-chips span, .place-action:not(.booking-action):not(.primary), .detail-bottom a.detail-direction,
  .guide-entry, .header-map, .map-search, .okinawa-jump, .locate, .extra-regions summary,
  .detail-more, .reviews-heading button, .request-phrase button, .secondary-btn, .inline-input button) {
  background: var(--theme-panel); border-color: var(--theme-border); color: var(--theme-accent);
}
html[data-theme="dark"] :is(.place-action.booking-action, .place-action.primary, .primary-btn,
  .detail-bottom a:not(.detail-direction), .hero-link, .add-clinic) { color: var(--theme-on-accent); }
html[data-theme="dark"] :is(.region.active .region-chip-count, .place-filter.active span,
  .place-filter:hover, .card-area, .card-distance, .detail-topbar button, .detail-tabs button,
  .destination-bar label, .discovery b, .trip-journey-head strong, .trip-selected a,
  .request-phrase summary, .request-phrase button, .faq-tabs a, .side-nav .side-map, .faq-side .side-map) {
  color: var(--theme-accent);
}
html[data-theme="dark"] :is(.badge.traveler) { background: #213f50; color: #b1daf4; }
html[data-theme="dark"] :is(.badge.unknown, .badge.community) { background: #4a3c28; color: #f1d19c; }
html[data-theme="dark"] :is(.intro-note, .law-note, .example-note, .info-disclaimer,
  .form-notice, .care-reply, .journey-note, .pending-verification) {
  background: #403424; border-color: #6b5636; color: #f0d9af;
}
html[data-theme="dark"] :is(.intro-note strong, .intro-note small, .law-note b, .law-note p, .law-note a,
  .care-reply-title, .care-reply ul, .pending-verification h3, .pending-verification p,
  .pending-verification-links a, .example-note b, .form-notice) { color: #f0d9af; }
html[data-theme="dark"] .journey-note { color: #f0d9af !important; }
html[data-theme="dark"] #tsushima :is(.prepare-box b, .path-grid b, .action-list b, .step-body strong) { color: var(--theme-text); }
html[data-theme="dark"] #tsushima .phrase { border-color: var(--theme-border); }
html[data-theme="dark"] #tsushima .phrase summary { background: var(--theme-panel); color: var(--theme-accent); }
html[data-theme="dark"] #tsushima .phrase p[lang="ja"] { color: var(--theme-text); }
html[data-theme="dark"] :is(.step-source, .request-guide-link, .place-source-links a,
  .journey-sources a, .pending-verification-links a) { text-decoration: underline; text-underline-offset: 2px; }

/* Paper and Coral: consistent foregrounds for filled controls and map overlays. */
body { background: var(--theme-bg); color: var(--theme-text); }
.theme-toggle { border-color: var(--theme-border); background: var(--theme-surface); color: var(--theme-accent); }
.theme-toggle:hover { background: var(--theme-panel); }
html[data-theme] :is(.add-clinic, .primary-btn, .hero-link, .sushi-install-confirm,
  .place-action.booking-action, .place-action.primary, .detail-bottom a:not(.detail-direction),
  .price-status-filters button.active, .route-filters button[aria-pressed=true],
  .admin-tabs button[aria-pressed=true], .clinic-filters button[aria-pressed=true], .card-actions .approve) {
  background: var(--theme-accent); border-color: var(--theme-accent); color: var(--theme-on-accent);
}
html[data-theme] :is(.end-card, .route-next, .deals-end) { background: var(--theme-ink); color: var(--theme-on-ink); }
html[data-theme] :is(.end-card p, .route-next small, .deals-end p) { color: var(--theme-on-ink); }
html[data-theme] :is(.end-card a, .route-next a, .deals-end a) { background: var(--theme-surface); color: var(--theme-accent); }
html[data-theme] .map-overlay { background: var(--theme-surface); color: var(--theme-text); }
html[data-theme] .leaflet-popup-content-wrapper { color: var(--theme-text); background: var(--theme-surface); }
html[data-theme] .leaflet-popup-tip { background: var(--theme-surface); }
.pin { background: var(--theme-accent); border-color: var(--theme-surface); }
.pin span { color: var(--theme-on-accent); }
.pin.selected { background: var(--theme-ink); }
.pin.selected span { color: var(--theme-on-ink); }
.region-count { background: var(--theme-accent); color: var(--theme-on-accent); }
.region-count strong { color: inherit; }
html[data-theme] .region-count strong { color: var(--theme-on-accent); }
html[data-theme] .map-hint { background: var(--theme-ink); color: var(--theme-on-ink); }
html[data-theme] .map-hint span, html[data-theme] .end-card span { color: var(--theme-on-ink); }
html[data-theme] .leaflet-control-zoom a { background: var(--theme-surface); color: var(--theme-text) !important; }
html[data-theme] .leaflet-control-zoom a:hover { background: var(--theme-panel); }