/* ============================================================
   モグさんぽ Web版 — ブランドテーマ
   配色の正は iOS 版 MogusanpoApp.swift の Color 拡張。
   ここでしか色を定義しない（他の CSS は必ず変数を参照する）。
   ============================================================ */

:root {
  /* --- ブランド色（ライト/ダーク共通・iOS 版と同値） --- */
  --navy:        #14387f;   /* Color.brandNavy      rgb(0.08,0.22,0.51) */
  --navy-light:  #2154b3;   /* Color.brandNavyLight rgb(0.13,0.33,0.70) */
  --gold:        #ffcc33;   /* Color.brandGold      ブランドアクセント専用 */
  --sky:         #8cccff;   /* Color.brandSky       ネイビー地の上のアクティブ表示 */
  --tab-fill:    #cce0fa;   /* Color.brandTabFill   選択中タブの背景 */
  --star:        #ffd426;   /* 評価の★（黄） */
  --accent:      #2154b3;   /* AccentColor（＝brandNavyLight と同値）。FAB・タグチップ */
  --brand-header: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);

  /* --- 文字サイズ（設定「文字サイズ」で部位ごとに縮小できる） --- */
  --size-card-name: 13px;
  --size-basic:     15px;
  --size-tag:       13px;
  --size-map:       13px;

  /* --- 余白・角丸・影（全画面で使い回す） --- */
  --gap:      12px;
  --radius:   12px;
  --radius-s: 8px;
  --shadow:   0 2px 10px rgba(0,0,0,.18);

  --header-h: 56px;
  --tabs-h:   44px;
  --bottom-h: 52px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- ライト（iOS のシステム色に合わせる）---
   bg=systemBackground / bg-elev=secondarySystemBackground / bg-grouped=systemGroupedBackground
   fg=label / fg-muted=secondaryLabel / fg-faint=tertiaryLabel / separator=separator
   ------------------------------------------------------------------------- */
:root, [data-theme="light"] {
  --bg:          #ffffff;
  --bg-elev:     #f2f2f7;
  --bg-grouped:  #f2f2f7;
  --bg-sunken:   #e5e5ea;
  --fg:          #000000;
  --fg-muted:    rgba(60,60,67,.60);
  --fg-faint:    rgba(60,60,67,.30);
  --separator:   rgba(60,60,67,.29);
  --field:       #f2f2f7;
  --chip:        rgba(33,84,179,.12);
  --chip-fg:     #2154b3;
  --on-navy:     #ffffff;
  --scrim:       rgba(0,0,0,.35);
  --danger:      #ff3b30;
  --warn:        #b76400;
  --placeholder: rgba(120,120,128,.15);
  --card:        #ffffff;   /* secondarySystemGroupedBackground（Form の行の地） */
}

/* --- ダーク（アプリの既定。v2.13.0 で自動→ダークへ） --- */
[data-theme="dark"] {
  --bg:          #000000;
  --bg-elev:     #1c1c1e;
  --bg-grouped:  #000000;
  --bg-sunken:   #2c2c2e;
  --fg:          #ffffff;
  --fg-muted:    rgba(235,235,245,.60);
  --fg-faint:    rgba(235,235,245,.30);
  --separator:   rgba(84,84,88,.65);
  --field:       #1c1c1e;
  --chip:        rgba(33,84,179,.28);
  --chip-fg:     #9dc0ff;
  --on-navy:     #ffffff;
  --scrim:       rgba(0,0,0,.55);
  --danger:      #ff453a;
  --warn:        #ffb454;
  --placeholder: rgba(120,120,128,.24);
  --card:        #1c1c1e;
}