/* 四里店鋪記錄計劃 — 共用主題色「街市暖木」
   色調來源：2024-11-30 基準輪 242 張四里街景相取樣分析
   （暖灰石屎約 38%、木棕招牌約 14%，紅金為點綴）。
   巡街 PWA、釘位工具、公開網站共用呢一份，唔好喺個別檔案另開色值。 */

:root {
  /* 底層 */
  --bg: #EFE8DA;          /* 暖紙色底 */
  --panel: #FBF7EF;       /* 抬起嘅面（卡片、側欄） */
  --card: #F5EFE2;        /* 次級面（未選中嘅掣） */
  --line: #DCD0B8;        /* 邊線 */

  /* 文字 */
  --text: #3A2E20;        /* 深木棕，對 --bg 對比度 11:1 */
  --muted: #6E5F49;       /* 次要文字，對 --bg 對比度 4.8:1 */

  /* 角色色 */
  --accent: #8C6117;      /* 黃銅金——強調、選中狀態（比取樣色略深，令細字都過 AA） */
  --green: #5C7A48;       /* 橄欖綠——確認、無變化 */
  --red: #A8532B;         /* 陶土紅——有變、警示 */
  --blue: #4A6B8A;        /* 灰藍——資訊 */

  /* 反白文字（用喺 green/red/accent 實色掣上） */
  --on-solid: #FFFFFF;

  /* 街道分色（地圖 marker，深色以配淺底） */
  --street-guangfuk-lane: #B45309;
  --street-taiwing-lane: #1D6E8C;
  --street-taikwong-lane: #4D7C2F;
  --street-taiming-lane: #A03E6B;
  --street-guangfuk-road: #6B4FA0;
  --street-wantau-street: #B03A2E;

  /* Phase 3 公開地圖：分類 A–G 色（X 其他借用 --muted）。
     全部對白字（--on-solid）對比度 >=4.7:1，過 WCAG AA。唔好改呢批色值，要加新色再開變數。 */
  --cat-a: #A8452A;  /* A 餐飲 */
  --cat-b: #5C6B26;  /* B 街市/食品零售 */
  --cat-c: #2E7A5C;  /* C 短租/特賣 */
  --cat-d: #2E6B7A;  /* D 零售/日用 */
  --cat-e: #4A3E9E;  /* E 五金/工程/車 */
  --cat-f: #8A3E7A;  /* F 服務/服飾/健康 */
  --cat-g: #9E2E5A;  /* G 金融/地產/貴重品 */
  --cat-h: #4A5A2E;  /* H 機構/組織 */

  /* Phase 3 公開地圖：連鎖度色（小店借用 --accent，未知借用 --muted） */
  --chain-mid: #4A7A6B;      /* 中小型連鎖 */
  --chain-big: #2E4A7A;      /* 連鎖大集團 */
  --chain-franchise: #7A5C2E; /* 加盟店（商品獨立） */
  --chain-suspect: #7A2E4A;   /* 疑似集團但無證據 */

  /* Phase 7 公開地圖「社群商店」模式色（2026-08-03）：刻意避開 --cat-*／--chain-*／--green/--red
     已用過嘅色相，7 個社群標籤各一色 + 一個「未標記」淡灰。全部只用喺 marker/圖例色塊，
     唔會有白字疊喺上面，故唔強制要求對白字對比度；但色與色之間要人眼分得開。 */
  --comm-indonesia: #C1440E;   /* 印尼——赤陶橙 */
  --comm-philippines: #2A6F97; /* 菲律賓——藍 */
  --comm-thailand: #6A4C93;    /* 泰國——紫 */
  --comm-vietnam: #B8860B;     /* 越南——暗金黃 */
  --comm-nepal: #9B4F6B;       /* 尼泊爾——莓紅 */
  --comm-southasia: #3E7A4A;   /* 南亞——深綠 */
  --comm-sea-other: #5C5C99;   /* 東南亞（未細分）——靛藍灰 */
  --comm-none: #C9C0AC;        /* 未標記——淡灰，明顯淺過上面全部色 */
}

/* 底圖處理（2026-08-02 定案）：CARTO Voyager ＋ 暖色調 ＋ 建築物加深。
   ⚠️ 唔可以用 contrast 加深建築物：對比度以中灰為中心向兩邊拉，Voyager 嘅建築物
   本身係淺灰，加對比只會連街道一齊推向白，建築物反而消失（踩過一次）。
   正解係 multiply 疊層（見下面 .sl-multiply-tiles）：白乘白仍然係白（街道唔動），
   淺灰乘淺灰會變深（建築物浮出嚟）——越深嘅嘢加深越多，正正係「街道淺、建築深」。 */
.sl-warm-tiles {
  filter: sepia(0.25) saturate(0.90) hue-rotate(-8deg) brightness(1.00);
}
/* 第二層一模一樣嘅圖磚，用 multiply 疊上去，50% 強度（使用者由四級揀 ②）。
   要用真嘅第二個 tileLayer（見 common.js），唔可以用 ::after + background:inherit——
   Leaflet 嘅圖層容器本身冇背景，啲圖磚係入面嘅 <img>，偽元素乜都攞唔到。 */
.sl-multiply-tiles {
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}

.sl-basemap-btn {
  font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(58,46,32,.20);
}
.sl-basemap-btn:active { transform: scale(0.96); filter: brightness(0.9); }