/* #region zone:disaster.style.mono-tokens — โทเค็นหน้าตาขาวดำแบบบ้าน (Health/Guide/Home) ทับโทเค็นเดิมของหน้า */
/* Household mono look (2026-10-24, docs/superpowers/specs/2026-10-24-weather-redesign.md). Loaded last, so
   these values replace disaster-tokens.css for every older sheet that reads them (forecast card, dock,
   legend, focus list, dialogs). Colour stays only in the --hz-* data tokens. Light, then dark (system and
   explicit), the same three-way pattern as disaster-tokens.css. */
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --font: 'Geist', 'Anuphan', 'Noto Sans Thai', 'Leelawadee UI', system-ui, sans-serif;
  --ink: #000000;
  --text: #000000;
  --muted: #5f5f5f;
  --faint: #6b6b6b;
  --accent: #000000;
  --accent-strong: #000000;
  --on-accent: #ffffff;
  --accent-soft: rgba(0, 0, 0, 0.06);

  --danger: #c4261a;
  --danger-soft: rgba(229, 52, 31, 0.1);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 160ms;
  --t-med: 240ms;
  --mono-switch-off: #d4d4d4;
  --mono-knob: #ffffff;
  --mono-amber-ink: #8a5a00;
  --mono-red-ink: #c4261a;
  --mono-dot-warn: #f0a800;
  --mono-dot-alert: #e5341f;
  --mono-dot-ok: #12a150;
  --seg-model: #000000;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ink: #ffffff;
    --text: #ffffff;
    --muted: #a3a3a3;
    --faint: #9a9a9a;
    --accent: #ffffff;
    --accent-strong: #ffffff;
    --on-accent: #000000;
    --accent-soft: rgba(255, 255, 255, 0.08);

    --danger: #ff6b5a;
    --danger-soft: rgba(255, 107, 90, 0.14);
    --mono-switch-off: #3a3a3a;
    --mono-knob: #000000;
    --mono-amber-ink: #ffc94d;
    --mono-red-ink: #ff6b5a;
    --mono-dot-warn: #ffc94d;
    --mono-dot-alert: #ff6b5a;
    --mono-dot-ok: #3ddc84;
    --seg-model: #ffffff;
  }
}
:root[data-theme='dark'] {
  --ink: #ffffff;
  --text: #ffffff;
  --muted: #a3a3a3;
  --faint: #9a9a9a;
  --accent: #ffffff;
  --accent-strong: #ffffff;
  --on-accent: #000000;
  --accent-soft: rgba(255, 255, 255, 0.08);

  --danger: #ff6b5a;
  --danger-soft: rgba(255, 107, 90, 0.14);
  --mono-switch-off: #3a3a3a;
  --mono-knob: #000000;
  --mono-amber-ink: #ffc94d;
  --mono-red-ink: #ff6b5a;
  --mono-dot-warn: #ffc94d;
  --mono-dot-alert: #ff6b5a;
  --mono-dot-ok: #3ddc84;
  --seg-model: #ffffff;
}
body {
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum' 1;
}
/* The frosted teal glass becomes a flat household card: solid surface, one soft shadow, no blur. */
.glass {
  background: var(--glass-strong);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--u-border);
  box-shadow: var(--glass-shadow);
}
#app :is(button, a, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}
/* #endregion */

/* #region zone:disaster.style.mono-chrome — ปุ่มลอยบนแผนที่ แบรนด์ และปุ่มลัด แบบขาวดำ */
#app .brand {
  border-radius: var(--u-radius-pill);
  background: var(--glass-strong);
  box-shadow: var(--glass-shadow);
  color: var(--text);
}
#app .brand img {
  border-radius: 8px;
}
#app .brand-name {
  font-weight: 650;
  letter-spacing: -0.02em;
}
#app .map-tools {
  gap: var(--u-space-2);
}
#app .map-tools button,
#app .map-tools .glass {
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: var(--u-radius-pill);
  background: var(--glass-strong);
  box-shadow: var(--glass-shadow);
  color: var(--text);
  font-weight: 650;
  transition:
    transform var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out);
}
#app .map-tools button:hover {
  background: var(--card);
}
#app .map-tools button:active,
#app .ui-chip:active,
#app .now-action:active {
  transform: scale(0.97);
}
#app .ui-chip,
#app .sheet-action {
  border: 0;
  border-radius: var(--u-radius-pill);
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  padding: 10px var(--u-space-4);
}
#app .ui-chip:hover {
  background: var(--track);
}
#app .ui-chip[aria-pressed='true'] {
  background: var(--text);
  color: var(--glass-strong);
}
.maplibregl-popup-content {
  border-radius: var(--u-radius-card);
  background: var(--glass-strong);
  color: var(--text);
  box-shadow: var(--glass-shadow);
}
@media (prefers-reduced-motion: reduce) {
  #app .map-tools button,
  #app .ui-chip,
  #app .now-action {
    transition: none;
  }
  #app .map-tools button:active,
  #app .ui-chip:active,
  #app .now-action:active {
    transform: none;
  }
}
/* #endregion */