/* #region zone:disaster.style.tokens — โทเค็นดีไซน์ Super_T Hazard (สืบทอดจากแผนที่ + ระบบสีภัยพิบัติใหม่) */
/* Direction contract (impeccable, new-work §5): see index.html's opening HTML comment for the full
   THESIS/OWN-WORLD/STORY/FIRST VIEWPORT/FORM/FINISH record. This file inherits apps/map/map-tokens.css's
   brand tokens verbatim (same teal/ink family, same glass system, same Anuphan face, same radii/easing) and
   adds only the hazard vocabulary Codex's "Quiet Observatory" consult chose: periwinkle dotted rain, blue
   hatched flood, terracotta hotspot diamonds, ochre PM2.5 circles, amber warning badges. Never re-tune the
   data/brand tokens here. Shared Health UI tokens own page/card/overlay surfaces (2026-10-26). */
@font-face {
  font-family: 'Anuphan';
  src: url('fonts/Anuphan.ttf') format('truetype');
  font-weight: 100 700;
  font-display: swap;
}
:root {
  --map-bg: var(--u-page);
  --glass: var(--u-glass);
  --glass-strong: var(--u-sheet);
  --glass-line: var(--u-border);
  --glass-edge: var(--u-border);
  --glass-shadow: var(--u-shadow-overlay);
  --card: var(--u-card);
  --card-line: var(--u-border);
  --track: var(--u-card-2);
  --r-panel: var(--u-radius-card);
  --r-card: var(--u-radius-card);
  --r-control: var(--u-radius-inner);

  color-scheme: light dark;
  --sheet-safe-top: env(safe-area-inset-top, 0px);
  --sheet-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sheet-space: var(--u-space-2, 8px);
  --sheet-target: var(--u-tap, 44px);
  --tap-min: var(--u-tap, 44px);
  --font: 'Anuphan', 'Noto Sans Thai', 'Leelawadee UI', system-ui, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.75rem;
  --fs-hero: 3rem;
  --ink: #0b2029;
  --text: #0b2029;
  --muted: #3f5559;
  --faint: #52676b;
  --accent: #007f78;
  --accent-strong: #006a64;
  --on-accent: #ffffff;
  --accent-soft: rgba(0, 127, 120, 0.12);

  --danger: #a8102c;
  --danger-soft: rgba(168, 16, 44, 0.09);

  --r-pill: var(--u-radius-pill, 999px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms;
  --t-med: 240ms;
  /* Hazard vocabulary (Quiet Observatory, Codex consult 2026-09-27): each hazard keeps a fixed hue AND a
     fixed shape/texture, so two active layers never fight for the same visual channel. */
  --hz-rain: #778ccb;
  --hz-rain-ink: #4a5a94;
  --hz-rain-soft: rgba(119, 140, 203, 0.16);
  --hz-flood: #367da8;
  --hz-flood-ink: #24587a;
  --hz-flood-soft: rgba(54, 125, 168, 0.18);
  --hz-hotspot: #c67550;
  --hz-hotspot-ink: #93532e;
  --hz-hotspot-soft: rgba(198, 117, 80, 0.16);
  --hz-pm25: #b08a2e;
  --hz-pm25-ink: #7a5d18;
  --hz-pm25-soft: rgba(176, 138, 46, 0.16);
  --hz-warn: #a8681a;
  --hz-warn-ink: #7a4a0b; /* amber as text: 6.5:1 on white (the fill hue is only 3.8:1) */
  --hz-warn-bg: rgba(214, 140, 0, 0.14);
  --hz-warn-line: rgba(168, 106, 12, 0.4);
  /* #region zone:disaster.style.tokens.forecast-map — โทเค็นแผนที่พยากรณ์: ช่วงไทม์ไลน์ + ฐานสีจาง */
  --seg-radar: #5b6bb5;
  --seg-nowcast: #8e6bb8;
  --seg-model: var(--accent);
  --bm-sea: #d3dde2;
  --bm-land: #eeede9;
  --bm-th: #f7f6f2;
  --bm-line: rgba(90, 84, 74, 0.26);
  --bm-label: #4a5a5e;
  /* #endregion */
}
/* Bridge for the shared Desk SelectMenu (apps/desk/ui-controls.css): its token names mapped onto this web's own
   tokens. Scoped to the control and its popover, because the login shell reads --panel/--line from :root too. */
.ui-select,
.ui-popover {
  --line: var(--u-border);
  --panel: var(--u-sheet);
  --panel2: var(--track);
  --hover: var(--accent-soft);
  --acc-soft: var(--accent-soft);
  --acc-ring: color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-text: var(--accent-strong);
  --down: var(--danger);
  --pop-shadow: var(--glass-shadow);
  --r-input: var(--r-control);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e9f2ef;
    --text: #e9f2ef;
    --muted: #b3c6c2;
    --faint: #9db3ae;
    --accent: #3cc7b7;
    --accent-strong: #5fd6c8;
    --on-accent: #04181c;
    --accent-soft: rgba(60, 199, 183, 0.16);

    --danger: #ff8fa1;
    --danger-soft: rgba(255, 143, 161, 0.12);
    --hz-rain: #9aabdc;
    --hz-rain-ink: #c4cff0;
    --hz-rain-soft: rgba(154, 171, 220, 0.18);
    --hz-flood: #6fb2de;
    --hz-flood-ink: #afdbf4;
    --hz-flood-soft: rgba(111, 178, 222, 0.2);
    --hz-hotspot: #e39a70;
    --hz-hotspot-ink: #f3c4a6;
    --hz-hotspot-soft: rgba(227, 154, 112, 0.18);
    --hz-pm25: #d9b45c;
    --hz-pm25-ink: #efd495;
    --hz-pm25-soft: rgba(217, 180, 92, 0.18);
    --hz-warn: #e0a03a;
    --hz-warn-ink: #e0a03a;
    --hz-warn-bg: rgba(240, 170, 40, 0.16);
    --hz-warn-line: rgba(240, 170, 40, 0.38);
    --seg-radar: #9aa8f0;
    --seg-nowcast: #c6a6ee;
    --seg-model: var(--accent);
    --bm-sea: #0b171c;
    --bm-land: #15232a;
    --bm-th: #1a2b31;
    --bm-line: rgba(180, 205, 200, 0.16);
    --bm-label: #a9bdb8;
  }
}
:root[data-theme='light'] {
  color-scheme: light;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --ink: #e9f2ef;
  --text: #e9f2ef;
  --muted: #b3c6c2;
  --faint: #9db3ae;
  --accent: #3cc7b7;
  --accent-strong: #5fd6c8;
  --on-accent: #04181c;
  --accent-soft: rgba(60, 199, 183, 0.16);

  --danger: #ff8fa1;
  --danger-soft: rgba(255, 143, 161, 0.12);
  --hz-rain: #9aabdc;
  --hz-rain-ink: #c4cff0;
  --hz-rain-soft: rgba(154, 171, 220, 0.18);
  --hz-flood: #6fb2de;
  --hz-flood-ink: #afdbf4;
  --hz-flood-soft: rgba(111, 178, 222, 0.2);
  --hz-hotspot: #e39a70;
  --hz-hotspot-ink: #f3c4a6;
  --hz-hotspot-soft: rgba(227, 154, 112, 0.18);
  --hz-pm25: #d9b45c;
  --hz-pm25-ink: #efd495;
  --hz-pm25-soft: rgba(217, 180, 92, 0.18);
  --hz-warn: #e0a03a;
  --hz-warn-ink: #e0a03a;
  --hz-warn-bg: rgba(240, 170, 40, 0.16);
  --hz-warn-line: rgba(240, 170, 40, 0.38);
  --seg-radar: #9aa8f0;
  --seg-nowcast: #c6a6ee;
  --seg-model: var(--accent);
  --bm-sea: #0b171c;
  --bm-land: #15232a;
  --bm-th: #1a2b31;
  --bm-line: rgba(180, 205, 200, 0.16);
  --bm-label: #a9bdb8;
}
/* #endregion */