/**
 * EwoooC Design Token v3.0 — Production
 * ─────────────────────────────────────────────────────────────
 * DNA: MOMO Pro × Nothing × Claude
 * 變更重點（相對 v2.x）：
 *   1. 全站去除 linear-gradient／radial-gradient／box-shadow blur，改為單色 + 1px 線條
 *   2. 五大導航群組各自 accent，避免「全站焦糖橘」造成主次不分
 *   3. 字級從 16 級壓到 8 級；spacing scale 重新排序為 4/8/12/16/24/32/48
 *   4. 米色背景統一 #f0ebe1（介於原本 body 與 surface 之間）
 *   5. 不純黑：所有 ink 都帶 5% 暖色，避免 var(--momo-text-strong) / var(--momo-on-accent, #fff8ef) 的數位刺眼
 *
 * 用法：
 *   .momo-app[data-active-page="..."] 由 _ewoooc_shell.html 自動套群組 accent
 *   不要在 component CSS 裡再重新指定群組色，全部走 var(--momo-page-*)
 */

:root {
  /* ════════════════════════════════════════════════════════
   * 1. 中性色系 — 暖米基底
   * ════════════════════════════════════════════════════════ */
  /* 頁面層 */
  --momo-bg-body:           #f0ebe1;   /* 主背景，比 v2 略提亮 */
  --momo-bg-surface:        #faf6ec;   /* 卡片底 */
  --momo-bg-elevated:       #fdfaf2;   /* 浮層、modal */
  --momo-bg-paper:          #f5efe2;   /* 第二層卡片、表格列 */
  --momo-bg-subtle:         #e6e0d2;   /* 分區底色 */
  --momo-bg-muted:          #d3cbb9;   /* disabled 區塊 */
  --momo-bg-sidebar:        #ebe4d4;   /* sidebar 米色（不再是黑底） */
  --momo-bg-sidebar-hover:  #e0d8c4;

  /* 暖墨色（用於文字 / 線條，永遠不純黑） */
  --momo-ink:               #2a2520;
  --momo-ink-strong:        #1a1612;
  --momo-ink-soft:          #4a4138;

  /* 主錦 KPI 深色家族 — 各群組獨立設計性格 */
  --momo-ink-monitor:       #3d2e22;   /* walnut 胡桃 — 監控 */
  --momo-ink-analytics:     #3a2e1a;   /* 焦糖糖蜜 — 分析 */
  --momo-ink-ops:           #3f2418;   /* 深陶土 — 營運 */
  --momo-ink-ai:            #3a2a1f;   /* espresso — AI */
  --momo-ink-system:        #352621;   /* 烏木 — 系統 */

  /* 文字三層 */
  --momo-text-primary:      #2a2520;
  --momo-text-secondary:    #6b6155;
  --momo-text-tertiary:     #9b9081;
  --momo-text-disabled:     #c4baa8;
  --momo-text-inverse:      #faf7f0;

  /* 邊框 — 全部走低對比暖色 */
  --momo-border:            rgba(42, 37, 32, 0.16);
  --momo-border-strong:     rgba(42, 37, 32, 0.28);
  --momo-border-light:      rgba(42, 37, 32, 0.10);
  --momo-border-faint:      rgba(42, 37, 32, 0.06);
  --momo-divider:           rgba(42, 37, 32, 0.10);

  /* ════════════════════════════════════════════════════════
   * 2. 暖色家族 — 全站可用的 accent token
   * ════════════════════════════════════════════════════════
   *   所有 accent 都在「不太暗」的暖色域：HSL L 38–62
   *   命名遵循「材質感」而非「明度」：caramel/honey/clay/rust...
   */
  --momo-warm-caramel:      #c96442;   /* 焦糖橘 — 監控群組 */
  --momo-warm-clay:          #b86f52;   /* 陶土橘紅 — 營運群組 */
  --momo-warm-honey:        #c89043;   /* 蜂蜜金 — 分析群組 */
  --momo-warm-saffron:      #b8792f;   /* 番紅花橘 — AI 中樞群組 */
  --momo-warm-terra:        #a85d3d;   /* 暖陶土 — 系統群組 */
  --momo-warm-rose:         #a84428;   /* 磚紅 — danger only (HSL 12°，真暖紅) */
  --momo-warm-olive:        #8a7340;   /* 焦土 — 中性暖 */
  --momo-warm-cream:        #f7efe3;   /* 奶油米白 */
  --momo-warm-latte:        #d8c1aa;   /* 奶茶木 */
  --momo-warm-apricot:      #e7b98f;   /* 杏色 */
  --momo-warm-blush:        #edd6cc;   /* 霧粉 */
  --momo-warm-greige:       #b8aea2;   /* 暖灰 */

  /* 暖色 soft 版本（背景 / chip 用） */
  --momo-warm-caramel-soft: rgba(201, 100, 66, 0.12);
  --momo-warm-clay-soft:     rgba(184, 111, 82, 0.12);
  --momo-warm-honey-soft:   rgba(200, 144, 67, 0.14);
  --momo-warm-saffron-soft: rgba(184, 121, 47, 0.13);
  --momo-warm-terra-soft:   rgba(168, 93, 61, 0.12);
  --momo-warm-rose-soft:    rgba(168, 68, 40, 0.12);
  --momo-warm-olive-soft:   rgba(138, 115, 64, 0.12);

  --momo-accent-strong:     #8f4530;   /* V2 compatibility: prefer --momo-page-accent-dark in new CSS */

  /* ════════════════════════════════════════════════════════
   * 3. 群組主題 — 五大導航群組各自 accent
   * ════════════════════════════════════════════════════════
   *   由 _ewoooc_shell.html 設置 data-page-group=""
   *   未指定時 fallback 到 caramel
   *
   *   群組映射：
   *     monitor    → caramel  (商品看板 / 活動看板)
   *     analytics  → honey    (業績分析 / 月份總表 / 成長 / 當日)
   *     ops        → clay     (廠商缺貨 / 雲端匯入)
   *     ai         → saffron  (AI 助手 / AI 觀測台)
   *     system     → terra    (系統管理 / 設定)
   */
  --momo-page-accent:       var(--momo-warm-caramel);
  --momo-page-accent-dark:  #8f4530;
  --momo-page-accent-soft:  var(--momo-warm-caramel-soft);
  --momo-page-accent-line:  rgba(201, 100, 66, 0.32);
  --momo-page-inverse:      #fff8ef;

  /* 圖表 / 視覺輔助色（屬於同群組的協和色） */
  --momo-page-chart-1:      var(--momo-warm-caramel);
  --momo-page-chart-2:      var(--momo-warm-apricot);
  --momo-page-chart-3:      var(--momo-warm-honey);
  --momo-page-chart-4:      var(--momo-warm-olive);
  --momo-page-chart-5:      var(--momo-warm-clay);
  --momo-page-chart-6:      var(--momo-warm-greige);

  /* ════════════════════════════════════════════════════════
   * 4. 狀態色 — 去飽和
   * ════════════════════════════════════════════════════════ */
  --momo-success:           #5a7a3f;
  --momo-success-bg:        #e6ead6;
  --momo-success-border:    rgba(90, 122, 63, 0.32);
  --momo-success-text:      #3d5527;

  --momo-warning:           #b8792f;
  --momo-warning-bg:        #f3e7c4;
  --momo-warning-border:    rgba(184, 121, 47, 0.32);
  --momo-warning-text:      #6e500e;

  --momo-danger:            #a84428;
  --momo-danger-bg:         #efd3c4;
  --momo-danger-border:     rgba(168, 68, 40, 0.32);
  --momo-danger-text:       #7a3210;

  --momo-info:              #4a6b85;
  --momo-info-bg:           #dfe5ec;
  --momo-info-border:       rgba(74, 107, 133, 0.32);
  --momo-info-text:         #2d4459;

  /* ════════════════════════════════════════════════════════
   * 5. 標籤色（Tag / Chip / Badge）
   * ════════════════════════════════════════════════════════
   *   一個標籤 = 一組 (bg + border + text)，三件成套
   *   全部 WCAG AA on bg
   */
  --momo-tag-caramel-bg:     #f5e1d9;
  --momo-tag-caramel-border: rgba(201, 100, 66, 0.32);
  --momo-tag-caramel-text:   #7a3520;

  --momo-tag-honey-bg:       #f3e7c4;
  --momo-tag-honey-border:   rgba(200, 144, 67, 0.36);
  --momo-tag-honey-text:     #6e500e;

  --momo-tag-clay-bg:         #ebd9cb;
  --momo-tag-clay-border:     rgba(184, 111, 82, 0.34);
  --momo-tag-clay-text:       #6f3a23;

  --momo-tag-saffron-bg:     #f0dfc1;
  --momo-tag-saffron-border: rgba(184, 121, 47, 0.36);
  --momo-tag-saffron-text:   #6f4915;

  --momo-tag-terra-bg:       #ecdcd0;
  --momo-tag-terra-border:   rgba(168, 93, 61, 0.34);
  --momo-tag-terra-text:     #6a3621;

  --momo-tag-rust-bg:        #efd3c4;
  --momo-tag-rust-border:    rgba(168, 68, 40, 0.34);
  --momo-tag-rust-text:      #7a3210;

  --momo-tag-olive-bg:       #ece5d2;
  --momo-tag-olive-border:   rgba(138, 115, 64, 0.32);
  --momo-tag-olive-text:     #5a4a1c;

  --momo-tag-ink-bg:         #2a2520;
  --momo-tag-ink-border:     #2a2520;
  --momo-tag-ink-text:       #faf7f0;

  --momo-tag-muted-bg:       #e2dccf;
  --momo-tag-muted-border:   rgba(42, 37, 32, 0.16);
  --momo-tag-muted-text:     #645c52;

  --momo-tag-success-bg:     #e6ead6;
  --momo-tag-success-border: rgba(90, 122, 63, 0.30);
  --momo-tag-success-text:   #3d5527;

  /* P0 / P1 / P2 警示專用（與蜂蜜黃同家族，HSL 12° / 39° / 30°） */
  --momo-priority-p0-bg:     #efd3c4;
  --momo-priority-p0-border: rgba(168, 68, 40, 0.36);
  --momo-priority-p0-text:   #7a3210;

  --momo-priority-p1-bg:     #f3e7c4;
  --momo-priority-p1-border: rgba(200, 144, 67, 0.36);
  --momo-priority-p1-text:   #6e500e;

  --momo-priority-p2-bg:     #ece5d2;
  --momo-priority-p2-border: rgba(138, 115, 64, 0.32);
  --momo-priority-p2-text:   #5a4a1c;

  /* ════════════════════════════════════════════════════════
   * 6. Typography
   * ════════════════════════════════════════════════════════ */
  --momo-font-display:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --momo-font-family:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --momo-font-mono:
    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --momo-font-family-base:  var(--momo-font-family);
  --momo-font-family-mono:  var(--momo-font-mono);

  /* 字級 — 8 階 (從 28 種降到 8) */
  --momo-text-display:      30px;     /* hero 數字 */
  --momo-text-headline:     22px;     /* 區塊大數字 */
  --momo-text-title:        17px;     /* 卡片標題 */
  --momo-text-body:         14px;     /* 內文 */
  --momo-text-body-sm:      13px;     /* 表格內文 */
  --momo-text-meta:         12px;     /* mono 數據 / 次要 */
  --momo-text-label:        11px;     /* LABEL only */
  --momo-text-label-tiny:   10px;     /* 角落標籤 only */

  /* 兼容 v2 命名 */
  --momo-font-size-xs:      12px;
  --momo-font-size-sm:      13px;
  --momo-font-size-base:    14px;
  --momo-font-size-lg:      17px;
  --momo-font-size-xl:      22px;
  --momo-font-size-2xl:     30px;

  --momo-font-weight-normal:    400;
  --momo-font-weight-medium:    500;
  --momo-font-weight-semibold:  600;
  --momo-font-weight-bold:      700;
  --momo-font-weight-black:     800;

  --momo-line-height-tight:     1.2;
  --momo-line-height-base:      1.5;
  --momo-line-height-loose:     1.7;

  /* ════════════════════════════════════════════════════════
   * 7. Spacing — 7 階
   * ════════════════════════════════════════════════════════ */
  --momo-space-1:           4px;
  --momo-space-2:           8px;
  --momo-space-3:           12px;
  --momo-space-4:           16px;
  --momo-space-5:           24px;
  --momo-space-6:           32px;
  --momo-space-7:           48px;
  --momo-space-8:           64px;

  /* ════════════════════════════════════════════════════════
   * 8. Radius — 全站偏方角
   * ════════════════════════════════════════════════════════ */
  --momo-radius-sm:         2px;
  --momo-radius-md:         4px;
  --momo-radius-lg:         6px;
  --momo-radius-xl:         10px;     /* 只有 hero / modal */
  --momo-radius-pill:       999px;
  --momo-radius-circle:     50%;

  /* ════════════════════════════════════════════════════════
   * 9. Shadow — Nothing 風：用線條取代陰影
   * ════════════════════════════════════════════════════════ */
  --momo-shadow-sm:         inset 0 -1px 0 var(--momo-border-light);
  --momo-shadow-md:         0 0 0 1px var(--momo-border-light);
  --momo-shadow-lg:         0 0 0 1px var(--momo-border-strong);
  --momo-shadow-modal:      0 8px 28px -10px rgba(42, 37, 32, 0.18),
                            0 0 0 1px var(--momo-border-light);
  --momo-shadow-focus:      0 0 0 3px var(--momo-page-accent-soft);

  /* ════════════════════════════════════════════════════════
   * 10. Transition
   * ════════════════════════════════════════════════════════ */
  --momo-duration-fast:     0.12s;
  --momo-duration-normal:   0.2s;
  --momo-duration-slow:     0.4s;
  --momo-ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);
  --momo-ease-out:          cubic-bezier(0, 0, 0.2, 1);

  --momo-transition-base:
    color var(--momo-duration-fast) var(--momo-ease-in-out),
    background-color var(--momo-duration-fast) var(--momo-ease-in-out),
    border-color var(--momo-duration-fast) var(--momo-ease-in-out),
    box-shadow var(--momo-duration-fast) var(--momo-ease-in-out);

  /* ════════════════════════════════════════════════════════
   * 10b. Dot Matrix — 點陣視覺語言（Nothing Phone 風）
   * ════════════════════════════════════════════════════════
   *   全站共用 utility token；不要在 component CSS 裡重新定義 dot 圖樣
   *   尺寸 token：tight(8) / base(10) / loose(12) / wide(14)
   *   濃度 token：whisper(0.06) / soft(0.14) / mid(0.28) / strong(0.55)
   *   顏色：預設吃 currentColor，由父層字色決定
   */
  --momo-dot-size-tight:    8px;
  --momo-dot-size-base:     10px;
  --momo-dot-size-loose:    12px;
  --momo-dot-size-wide:     14px;
  --momo-dot-radius:        1.1px;     /* 點半徑（用於 radial-gradient 半徑） */

  --momo-dot-alpha-whisper: 0.06;
  --momo-dot-alpha-soft:    0.14;
  --momo-dot-alpha-mid:     0.28;
  --momo-dot-alpha-strong:  0.55;

  /* ════════════════════════════════════════════════════════
   * 11. z-index
   * ════════════════════════════════════════════════════════ */
  --momo-z-base:            1;
  --momo-z-dropdown:        1000;
  --momo-z-sticky:          1020;
  --momo-z-fixed:           1030;
  --momo-z-modal-backdrop:  1040;
  --momo-z-modal:           1050;
  --momo-z-popover:         1060;
  --momo-z-tooltip:         1070;
  --momo-z-toast:           1080;

  /* ════════════════════════════════════════════════════════
   * 12. Layout
   * ════════════════════════════════════════════════════════ */
  --momo-sidebar-width:           240px;
  --momo-sidebar-collapsed-width: 64px;
  --momo-topbar-height:           56px;
  --momo-content-max-width:       1600px;
  --momo-content-padding-x:       28px;
  --momo-content-padding-y:       24px;
}

/* ════════════════════════════════════════════════════════
 * 群組主題切換 — 由 [data-page-group] 觸發
 * ════════════════════════════════════════════════════════ */
.momo-app[data-page-group="monitor"] {
  --momo-page-accent:       var(--momo-warm-caramel);
  --momo-page-accent-dark:  #8f4530;
  --momo-page-accent-soft:  var(--momo-warm-caramel-soft);
  --momo-page-accent-line:  rgba(201, 100, 66, 0.32);
  --momo-page-ink:          var(--momo-ink-monitor);
  --momo-page-chart-1:      var(--momo-warm-caramel);
  --momo-page-chart-2:      var(--momo-warm-apricot);
  --momo-page-chart-3:      var(--momo-warm-honey);
  --momo-page-chart-4:      var(--momo-warm-olive);
  --momo-page-chart-5:      var(--momo-warm-clay);
  --momo-page-chart-6:      var(--momo-warm-greige);
}

.momo-app[data-page-group="analytics"] {
  --momo-page-accent:       var(--momo-warm-honey);
  --momo-page-accent-dark:  #80541a;
  --momo-page-accent-soft:  var(--momo-warm-honey-soft);
  --momo-page-accent-line:  rgba(200, 144, 67, 0.36);
  --momo-page-ink:          var(--momo-ink-analytics);
  --momo-page-chart-1:      var(--momo-warm-honey);
  --momo-page-chart-2:      var(--momo-warm-caramel);
  --momo-page-chart-3:      var(--momo-warm-olive);
  --momo-page-chart-4:      var(--momo-warm-apricot);
  --momo-page-chart-5:      var(--momo-warm-clay);
  --momo-page-chart-6:      var(--momo-warm-greige);
}

.momo-app[data-page-group="ops"] {
  --momo-page-accent:       var(--momo-warm-clay);
  --momo-page-accent-dark:  #6f3a23;
  --momo-page-accent-soft:  var(--momo-warm-clay-soft);
  --momo-page-accent-line:  rgba(184, 111, 82, 0.34);
  --momo-page-ink:          var(--momo-ink-ops);
  --momo-page-chart-1:      var(--momo-warm-clay);
  --momo-page-chart-2:      var(--momo-warm-terra);
  --momo-page-chart-3:      var(--momo-warm-honey);
  --momo-page-chart-4:      var(--momo-warm-caramel);
  --momo-page-chart-5:      var(--momo-warm-apricot);
  --momo-page-chart-6:      var(--momo-warm-greige);
}

.momo-app[data-page-group="ai"] {
  --momo-page-accent:       var(--momo-warm-saffron);
  --momo-page-accent-dark:  #6f4915;
  --momo-page-accent-soft:  var(--momo-warm-saffron-soft);
  --momo-page-accent-line:  rgba(184, 121, 47, 0.36);
  --momo-page-ink:          var(--momo-ink-ai);
  --momo-page-chart-1:      var(--momo-warm-saffron);
  --momo-page-chart-2:      var(--momo-warm-honey);
  --momo-page-chart-3:      var(--momo-warm-caramel);
  --momo-page-chart-4:      var(--momo-warm-olive);
  --momo-page-chart-5:      var(--momo-warm-apricot);
  --momo-page-chart-6:      var(--momo-warm-greige);
}

.momo-app[data-page-group="system"] {
  --momo-page-accent:       var(--momo-warm-terra);
  --momo-page-accent-dark:  #6a3621;
  --momo-page-accent-soft:  var(--momo-warm-terra-soft);
  --momo-page-accent-line:  rgba(168, 93, 61, 0.34);
  --momo-page-ink:          var(--momo-ink-system);
  --momo-page-chart-1:      var(--momo-warm-terra);
  --momo-page-chart-2:      var(--momo-warm-clay);
  --momo-page-chart-3:      var(--momo-warm-olive);
  --momo-page-chart-4:      var(--momo-warm-greige);
  --momo-page-chart-5:      var(--momo-warm-honey);
  --momo-page-chart-6:      var(--momo-warm-apricot);
}

/* ════════════════════════════════════════════════════════
 * 全域基礎
 * ════════════════════════════════════════════════════════ */
.momo-app {
  font-family: var(--momo-font-family);
  font-size: var(--momo-text-body);
  line-height: var(--momo-line-height-base);
  color: var(--momo-text-primary);
  background-color: var(--momo-bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
}

.momo-app *,
.momo-app *::before,
.momo-app *::after {
  box-sizing: border-box;
}

.momo-mono {
  font-family: var(--momo-font-mono);
  font-feature-settings: "tnum";
}

.momo-display {
  font-family: var(--momo-font-display);
  font-feature-settings: "tnum", "ss01";
  letter-spacing: 0;
}

.momo-label {
  font-family: var(--momo-font-display);
  font-size: var(--momo-text-label-tiny);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--momo-text-tertiary);
}

/* 滾動條 */
.momo-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.momo-scroll::-webkit-scrollbar-track { background: transparent; }
.momo-scroll::-webkit-scrollbar-thumb {
  background: rgba(42, 37, 32, 0.18);
  border-radius: var(--momo-radius-pill);
}
.momo-scroll::-webkit-scrollbar-thumb:hover { background: rgba(42, 37, 32, 0.32); }

.momo-app button:not(.btn):not(.btn-close) {
  font-family: inherit;
}

/* 動畫 */
@keyframes momo-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes momo-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}