@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');

:root {
  --app-bg: #f6f3ee;
  --app-card: #fbf8f3;
  --app-surface: #ffffff;
  --app-text: #1d2735;
  --app-muted: #677282;
  --app-border: #e3e8ed;
  --app-primary: #2b6f62;
  --app-primary-hover: #235d53;
  --app-link: #1f5a50;
  --app-shadow-soft: 0 10px 30px rgba(23, 35, 50, 0.07);
  --app-shadow-card: 0 8px 22px rgba(23, 35, 50, 0.06);

  /* Legacy page tokens reused by current templates. */
  --bg: var(--app-bg);
  --card: var(--app-card);
  --surface: var(--app-surface);
  --text: var(--app-text);
  --muted: var(--app-muted);
  --border: var(--app-border);
  --primary: var(--app-primary);
  --primary-hover: var(--app-primary-hover);
  --accent-soft: #e8f1ed;
}

html,
body {
  background-color: var(--app-bg);
  color: var(--app-text);
}

a {
  color: var(--app-link);
}

/* Dark theme (forced over page-level :root tokens). */
:root.theme-dark,
html.theme-dark,
body.theme-dark {
  color-scheme: dark;

  --app-bg: #10151d !important;
  --app-card: #161d27 !important;
  --app-surface: #1b2430 !important;
  --app-text: #e7edf5 !important;
  --app-muted: #a8b5c6 !important;
  --app-border: #2c3746 !important;
  --app-primary: #60c3ac !important;
  --app-primary-hover: #7ad2be !important;
  --app-link: #8adfca !important;
  --app-shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
  --app-shadow-card: 0 10px 24px rgba(0, 0, 0, 0.32) !important;

  --bg: var(--app-bg) !important;
  --card: var(--app-card) !important;
  --surface: var(--app-surface) !important;
  --text: var(--app-text) !important;
  --muted: var(--app-muted) !important;
  --border: var(--app-border) !important;
  --primary: var(--app-primary) !important;
  --primary-hover: var(--app-primary-hover) !important;
  --accent-soft: rgba(96, 195, 172, 0.14) !important;
}

html.theme-dark body {
  background: var(--app-bg);
  color: var(--app-text);
}

html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark .title,
html.theme-dark .section-title,
html.theme-dark .hero-village-title,
html.theme-dark .hero-poi-title {
  color: var(--app-text);
}

html.theme-dark .hero,
html.theme-dark .settings-card,
html.theme-dark .settings-item,
html.theme-dark .event-card,
html.theme-dark .route-card,
html.theme-dark .poi-card,
html.theme-dark .shop-card,
html.theme-dark .practical-place-card,
html.theme-dark .route-context,
html.theme-dark .visit-status,
html.theme-dark .weather-timeline-item,
html.theme-dark .weather-timeline-popover {
  background: var(--app-card);
  border-color: var(--app-border);
  color: var(--app-text);
}

html.theme-dark .hero {
  background: linear-gradient(180deg, #151d27 0%, #101720 100%);
}

html.theme-dark .back-link,
html.theme-dark .hero-back-link,
html.theme-dark .language-dropdown-toggle,
html.theme-dark .small-action,
html.theme-dark .app-bottom-sheet__cta,
html.theme-dark .filter-select,
html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select {
  background: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}

html.theme-dark .event-category,
html.theme-dark .meta-pill,
html.theme-dark .chip,
html.theme-dark .weather-chip {
  background: rgba(96, 195, 172, 0.15);
  color: #b7ebde;
  border-color: rgba(122, 210, 190, 0.4);
}

html.theme-dark .app-bottom-nav {
  background: rgba(16, 21, 29, 0.98);
  border-top-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.4);
}

html.theme-dark .app-bottom-nav__action {
  color: #cfd9e7;
}

html.theme-dark .app-bottom-nav__action:active,
html.theme-dark .app-bottom-nav__action:focus-visible {
  background: rgba(96, 195, 172, 0.18);
  color: #e7fff8;
}

html.theme-dark .app-bottom-nav__badge {
  box-shadow: 0 0 0 2px #10151d;
}

html.theme-dark .app-bottom-sheet {
  background: #121a24;
  border-top-color: var(--app-border);
}

html.theme-dark .app-bottom-sheet__title,
html.theme-dark .app-bottom-sheet__text,
html.theme-dark .app-bottom-sheet__cta,
html.theme-dark .app-bottom-sheet__close {
  color: var(--app-text);
}

/* Dark-mode completion pass for remaining public blocks. */
html.theme-dark .review-widget,
html.theme-dark .review-modal__panel,
html.theme-dark .living-card,
html.theme-dark .carousel-end-card,
html.theme-dark .emergency-block,
html.theme-dark .emergency-item,
html.theme-dark .place-item {
  background: var(--app-card) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}

html.theme-dark .review-widget__summary,
html.theme-dark .review-widget__discreet,
html.theme-dark .review-comment__meta,
html.theme-dark .map-route-status,
html.theme-dark .place-meta,
html.theme-dark .subtitle,
html.theme-dark .living-card-subtitle,
html.theme-dark .living-card-count,
html.theme-dark .carousel-end-card-text {
  color: var(--app-muted) !important;
}

html.theme-dark .review-widget__cta,
html.theme-dark .review-modal__cancel,
html.theme-dark .small-action,
html.theme-dark .category summary,
html.theme-dark .description-toggle {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

html.theme-dark .review-modal__form textarea {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

html.theme-dark .review-modal__submit {
  background: color-mix(in srgb, var(--app-primary) 88%, #08120f) !important;
  color: #f7fffd !important;
}

html.theme-dark .review-comment {
  border-top-color: color-mix(in srgb, var(--app-border) 88%, transparent) !important;
}

html.theme-dark .review-modal__title,
html.theme-dark .review-widget__title,
html.theme-dark .emergency-title,
html.theme-dark .place-title,
html.theme-dark .living-card-title,
html.theme-dark .carousel-end-card-title {
  color: var(--app-text) !important;
}

html.theme-dark .description-text.is-collapsed::after,
html.theme-dark .village-description-text.is-collapsed::after {
  background: linear-gradient(to bottom, rgba(16, 21, 29, 0), rgba(16, 21, 29, 0.95)) !important;
}

html.theme-dark .living-card-illustration,
html.theme-dark .showcase-card-media,
html.theme-dark .route-card .showcase-card-media,
html.theme-dark .route-card-trace,
html.theme-dark .event-card-media {
  background: #111925 !important;
  border-color: var(--app-border) !important;
}

html.theme-dark .carousel-end-card-icon,
html.theme-dark .carousel-end-card-arrow {
  background: rgba(96, 195, 172, 0.16) !important;
  color: #baf4e6 !important;
}

html.theme-dark #practical-map,
html.theme-dark #map,
html.theme-dark #route-map,
html.theme-dark #village-map {
  border-color: var(--app-border) !important;
}

html.theme-dark .leaflet-control-zoom a,
html.theme-dark .leaflet-control-layers-toggle,
html.theme-dark .leaflet-control-attribution {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

html.theme-dark .leaflet-popup-content-wrapper,
html.theme-dark .leaflet-popup-tip {
  background: #1a2330 !important;
  color: var(--app-text) !important;
}

html.theme-dark .leaflet-container .leaflet-control-attribution a {
  color: var(--app-link) !important;
}

html.theme-dark .leaflet-tile-pane {
  filter: brightness(0.72) contrast(1.05) saturate(0.75) hue-rotate(170deg);
}

/* Dyslexic mode: use a highly readable sans-serif, softer spacing and predictable glyphs. */
html.accessibility-dyslexic-font body,
body.accessibility-dyslexic-font {
  font-family: "Atkinson Hyperlegible", "OpenDyslexic", "Inter", "Arial", sans-serif;
  line-height: 1.58;
  letter-spacing: 0.012em;
  word-spacing: 0.02em;
  text-rendering: optimizeLegibility;
}

html.accessibility-dyslexic-font p,
html.accessibility-dyslexic-font li,
html.accessibility-dyslexic-font .settings-subtitle,
html.accessibility-dyslexic-font .settings-note,
html.accessibility-dyslexic-font .event-description,
html.accessibility-dyslexic-font .route-summary,
html.accessibility-dyslexic-font .poi-description,
html.accessibility-dyslexic-font .shop-description,
html.accessibility-dyslexic-font .practical-place-description {
  line-height: 1.62;
}

html.accessibility-dyslexic-font .settings-toggle__label,
html.accessibility-dyslexic-font .app-bottom-nav__label,
html.accessibility-dyslexic-font button,
html.accessibility-dyslexic-font input,
html.accessibility-dyslexic-font textarea,
html.accessibility-dyslexic-font select {
  letter-spacing: 0.01em;
}

/* Keep decorative serif headings untouched to preserve identity and avoid layout shifts. */
html.accessibility-dyslexic-font .hero-village-title,
html.accessibility-dyslexic-font .hero-poi-title,
html.accessibility-dyslexic-font .section-title,
html.accessibility-dyslexic-font .title {
  letter-spacing: normal;
}

/* High contrast mode with consistent token overrides and stronger outlines. */
:root.accessibility-high-contrast,
html.accessibility-high-contrast,
body.accessibility-high-contrast {
  --app-bg: #f8f9fb !important;
  --app-card: #ffffff !important;
  --app-surface: #ffffff !important;
  --app-text: #0d1523 !important;
  --app-muted: #233246 !important;
  --app-border: #223248 !important;
  --app-primary: #005fcc !important;
  --app-primary-hover: #004ca3 !important;
  --app-link: #004ca3 !important;
  --app-shadow-soft: 0 0 0 2px rgba(13, 21, 35, 0.12) !important;
  --app-shadow-card: 0 0 0 1px rgba(13, 21, 35, 0.25) !important;

  --bg: var(--app-bg) !important;
  --card: var(--app-card) !important;
  --surface: var(--app-surface) !important;
  --text: var(--app-text) !important;
  --muted: var(--app-muted) !important;
  --border: var(--app-border) !important;
  --primary: var(--app-primary) !important;
  --primary-hover: var(--app-primary-hover) !important;
  --accent-soft: #dae8ff !important;
}

html.theme-dark.accessibility-high-contrast,
body.theme-dark.accessibility-high-contrast {
  --app-bg: #070b11 !important;
  --app-card: #0f1722 !important;
  --app-surface: #101c2a !important;
  --app-text: #f7fbff !important;
  --app-muted: #d9e6f5 !important;
  --app-border: #a8c0db !important;
  --app-primary: #70b7ff !important;
  --app-primary-hover: #9bcdff !important;
  --app-link: #9ecfff !important;
  --accent-soft: rgba(112, 183, 255, 0.24) !important;
}

html.accessibility-high-contrast .hero,
html.accessibility-high-contrast .settings-card,
html.accessibility-high-contrast .settings-item,
html.accessibility-high-contrast .event-card,
html.accessibility-high-contrast .route-card,
html.accessibility-high-contrast .poi-card,
html.accessibility-high-contrast .shop-card,
html.accessibility-high-contrast .practical-place-card,
html.accessibility-high-contrast .route-context,
html.accessibility-high-contrast .visit-status,
html.accessibility-high-contrast .weather-timeline-item,
html.accessibility-high-contrast .weather-timeline-popover,
html.accessibility-high-contrast .app-bottom-sheet {
  border-width: 2px;
  box-shadow: none;
}

html.accessibility-high-contrast .app-bottom-nav {
  border-top-width: 2px;
}

html.accessibility-high-contrast .app-bottom-nav__action {
  font-weight: 600;
}

html.accessibility-high-contrast .app-bottom-nav__action:active,
html.accessibility-high-contrast .app-bottom-nav__action:focus-visible,
html.accessibility-high-contrast .app-bottom-nav__action[aria-current="page"] {
  background: color-mix(in srgb, var(--app-primary) 18%, var(--app-surface));
  outline: 2px solid var(--app-primary);
  outline-offset: -1px;
}

html.accessibility-high-contrast .event-category,
html.accessibility-high-contrast .meta-pill,
html.accessibility-high-contrast .chip,
html.accessibility-high-contrast .weather-chip {
  color: var(--app-text);
  border-width: 2px;
  background: color-mix(in srgb, var(--app-primary) 12%, var(--app-surface));
}

html.accessibility-high-contrast button,
html.accessibility-high-contrast .back-link,
html.accessibility-high-contrast .hero-back-link,
html.accessibility-high-contrast .language-dropdown-toggle,
html.accessibility-high-contrast .small-action,
html.accessibility-high-contrast .app-bottom-sheet__cta,
html.accessibility-high-contrast .filter-select,
html.accessibility-high-contrast input,
html.accessibility-high-contrast textarea,
html.accessibility-high-contrast select {
  border-width: 2px;
}

html.accessibility-high-contrast button:focus-visible,
html.accessibility-high-contrast [role="button"]:focus-visible,
html.accessibility-high-contrast a:focus-visible,
html.accessibility-high-contrast input:focus-visible,
html.accessibility-high-contrast textarea:focus-visible,
html.accessibility-high-contrast select:focus-visible,
html.accessibility-high-contrast .settings-toggle:focus-visible {
  outline: 3px solid var(--app-primary);
  outline-offset: 2px;
}