/* TD-2300 網頁配色
   ────────────────────────────────────────────────────────────
   深色與淺色兩套，三個頁面（首頁、裝置設定、裝置紀錄）共用。

   顏色一律走這裡的變數，頁面裡不要再寫死色碼 —— 否則切到淺色時
   那個顏色不會跟著變（深色底上的亮黃字，放到白底就看不見了）。

   ⚠ 淺色不是把深色反過來就好：
     #F5A623 這種亮黃在黑底很清楚，在白底幾乎看不到，
     所以淺色另外給了一組加深過的顏色，確保字都讀得到。 */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg:      #0d0d0f;
  --card:    #16161a;
  --card2:   #1c1c21;
  --border:  #2a2a31;
  --text:    #e8e8ea;
  --dim:     #8b8b93;

  /* 狀態色（文字與線條用） */
  --accent:  #E5484D;   /* 紅：品牌色、危險、離線（線條與圖示用） */
  --ok:      #30A46C;   /* 綠：正常 */
  --warn:    #F5A623;   /* 黃：注意 */
  --blue:    #4A9EFF;
  --purple:  #9B7EDE;

  /* 紅色「當文字」時要再亮一點 —— 品牌紅 #E5484D 疊在自己的淡紅底上
     只有 3.96:1，小字會讀不清楚（實測），所以文字另用亮一階的紅。 */
  --accent-text: #EC5D62;

  /* 淡底色（標籤、圖示底、提示框用） */
  --accent-soft: rgba(229, 72, 77, .15);
  --ok-soft:     rgba(48, 164, 108, .15);
  --warn-soft:   rgba(245, 166, 35, .15);
  --blue-soft:   rgba(74, 158, 255, .15);
  --purple-soft: rgba(155, 126, 222, .15);

  /* 更淡的整塊底色（例如離線警示條） */
  --accent-wash: rgba(229, 72, 77, .09);
  --blue-wash:   rgba(74, 158, 255, .08);
  --warn-wash:   rgba(245, 166, 35, .08);

  --accent-line: rgba(229, 72, 77, .35);
  --blue-line:   rgba(74, 158, 255, .30);
  --warn-line:   rgba(245, 166, 35, .30);

  --shadow: none;

  /* 裝置紀錄那頁的紀錄視窗：深色時比背景再沉一階 */
  --term-bg:   #08080a;
  --term-time: #6b6b76;
}

[data-theme="light"] {
  color-scheme: light;

  --bg:      #f6f6f8;
  --card:    #ffffff;
  --card2:   #f0f0f3;
  --border:  #dcdce2;
  --text:    #1b1b1f;
  --dim:     #66666f;

  /* 白底上要更深才看得清楚（亮黃、亮綠在白底會糊掉） */
  --accent:  #C81E24;
  --ok:      #17794A;
  --warn:    #8A5700;   /* 再深一點，疊在淡黃底上才讀得清楚 */
  --blue:    #0F62C8;
  --purple:  #6A44B8;

  /* 白底的紅本來就夠深，文字直接沿用 */
  --accent-text: #C81E24;

  /* 白底用低透明度就夠，太濃會蓋掉文字 */
  --accent-soft: rgba(200, 30, 36, .10);
  --ok-soft:     rgba(23, 121, 74, .10);
  --warn-soft:   rgba(138, 87, 0, .12);
  --blue-soft:   rgba(15, 98, 200, .10);
  --purple-soft: rgba(106, 68, 184, .10);

  --accent-wash: rgba(200, 30, 36, .06);
  --blue-wash:   rgba(15, 98, 200, .06);
  --warn-wash:   rgba(138, 87, 0, .07);

  --accent-line: rgba(200, 30, 36, .30);
  --blue-line:   rgba(15, 98, 200, .25);
  --warn-line:   rgba(138, 87, 0, .28);

  /* 淺色沒有陰影會顯得卡片浮不起來 */
  --shadow: 0 1px 2px rgba(16, 18, 27, .05);

  /* 淺色的紀錄視窗不用純白 —— 用很淡的灰才不刺眼，字仍是深色 */
  --term-bg:   #fbfbfd;
  --term-time: #90909a;
}

/* 切換時不要整頁硬跳，但也別慢到像卡住 */
body {
  transition: background-color .18s ease, color .18s ease;
}

/* ── 右上角的主題切換鈕（三個頁面共用） ── */
.theme-btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--dim);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
.theme-btn:hover { color: var(--text); border-color: var(--accent); }
.theme-btn svg { width: 15px; height: 15px; }