/* ============================================================
   iBusiness 店家後台網頁版：設計權杖 v1（2026-10-16）
   品牌色沿用 App（lib/def.dart）：亮藍 #32AAFF、海藍 #0C77C3、深底 #121217、淺灰底 #F4F6F9。
   對比已用程式驗算（scratchpad contrast.py）：文字 ≥ 4.5:1、圖形 ≥ 3:1。
     亮色：#32AAFF 配白字只有 2.6:1，所以主按鈕用 #0C77C3 配白字（4.7:1），亮藍只當暗色主題的填色。
     暗色：主按鈕用 #32AAFF 配深字 #06233A（6.4:1）。
   元件只吃語意權杖，頁面不可寫死色碼。
   ============================================================ */

:root {
  --f-ui: "Manrope", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
  --f-num: "Manrope", "Noto Sans TC", -apple-system, sans-serif;

  --t-xs: 12px;
  --t-sm: 13px;
  --t-base: 14px;
  --t-md: 15px;
  --t-lg: 18px;
  --t-xl: 22px;
  --t-2xl: 30px;
  --t-3xl: 38px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --dur: 140ms;

  /* 亮色 */
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --surface-2: #EEF2F7;
  --surface-3: #E4EAF2;
  --line: #DFE5EE;
  --line-strong: #C7D0DC;
  --ink: #121217;
  --ink-2: #4A4A5A;
  --ink-3: #6A6A7A;

  --brand: #0C77C3;          /* 主按鈕填色 */
  --brand-ink: #FFFFFF;      /* 主按鈕上的字 */
  --brand-hi: #0A66A8;       /* 主按鈕 hover */
  --brand-text: #0A6BB0;     /* 藍色文字 */
  --brand-soft: #E3F1FC;     /* 淡藍底 */
  --brand-bright: #32AAFF;   /* App 亮藍，只當大面積色塊或裝飾 */
  --bar: #1C8CDB;            /* 圖表長條 */
  --bar-dim: #BCD9F0;        /* 非選取長條 */

  /* 側欄（兩個主題都是深色） */
  --nav-bg: #121A26;
  --nav-line: #22304A;
  --nav-ink: #C9D3E0;
  --nav-ink-3: #8C99AB;
  --nav-active-bg: #1E3A57;
  --nav-active-ink: #FFFFFF;
  --nav-indicator: #32AAFF;

  /* 設備狀態 */
  --st-free: #0B7555;     --st-free-soft: #E1F5EE;
  --st-wash: #0A66A8;     --st-wash-soft: #E3F1FC;
  --st-spin: #5B4FD6;     --st-spin-soft: #ECEAFC;
  --st-dry: #A94306;      --st-dry-soft: #FCEBDD;
  --st-maint: #8A5F00;    --st-maint-soft: #FBF1D9;
  --st-err: #C8222A;      --st-err-soft: #FDE6E7;
  --st-off: #6A6A7A;      --st-off-soft: #EEF2F7;

  --up: #0B7555;
  --down: #C8222A;
  --danger-ink: #FFFFFF;     /* 危險按鈕（--st-err 底）上的字 */

  --shadow-1: 0 1px 2px rgba(18, 26, 38, .06);
  --shadow-pop: 0 12px 32px rgba(18, 26, 38, .16), 0 2px 6px rgba(18, 26, 38, .08);
  --scrim: rgba(12, 18, 28, .45);
  --ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-bright);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1219; --surface: #151B25; --surface-2: #1C2431; --surface-3: #232D3C; --line: #273041; --line-strong: #374256;
    --ink: #E9EEF5; --ink-2: #B2BCCA; --ink-3: #8B96A6;
    --brand: #32AAFF; --brand-ink: #06233A; --brand-hi: #5DB8F5; --brand-text: #5DB8F5; --brand-soft: #12304A; --brand-bright: #32AAFF;
    --bar: #32AAFF; --bar-dim: #24435F;
    --nav-bg: #0A0F16; --nav-line: #1B2433; --nav-active-bg: #1A3350;
    --st-free: #3FD3A6; --st-free-soft: #12302A; --st-wash: #5DB8F5; --st-wash-soft: #12304A; --st-spin: #A49BFF; --st-spin-soft: #241F45;
    --st-dry: #FF8A4C; --st-dry-soft: #3A2112; --st-maint: #E5B53A; --st-maint-soft: #352A0E; --st-err: #FF6B6F; --st-err-soft: #3A1517;
    --st-off: #8B96A6; --st-off-soft: #1C2431;
    --up: #3FD3A6; --down: #FF6B6F; --danger-ink: #2A0A0B;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
    --scrim: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1219; --surface: #151B25; --surface-2: #1C2431; --surface-3: #232D3C; --line: #273041; --line-strong: #374256;
  --ink: #E9EEF5; --ink-2: #B2BCCA; --ink-3: #8B96A6;
  --brand: #32AAFF; --brand-ink: #06233A; --brand-hi: #5DB8F5; --brand-text: #5DB8F5; --brand-soft: #12304A; --brand-bright: #32AAFF;
  --bar: #32AAFF; --bar-dim: #24435F;
  --nav-bg: #0A0F16; --nav-line: #1B2433; --nav-active-bg: #1A3350;
  --st-free: #3FD3A6; --st-free-soft: #12302A; --st-wash: #5DB8F5; --st-wash-soft: #12304A; --st-spin: #A49BFF; --st-spin-soft: #241F45;
  --st-dry: #FF8A4C; --st-dry-soft: #3A2112; --st-maint: #E5B53A; --st-maint-soft: #352A0E; --st-err: #FF6B6F; --st-err-soft: #3A1517;
  --st-off: #8B96A6; --st-off-soft: #1C2431;
  --up: #3FD3A6; --down: #FF6B6F; --danger-ink: #2A0A0B;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
  --scrim: rgba(0, 0, 0, .6);
  color-scheme: dark;
}