:root, [data-theme="light"] {
  --surface: #f6f3ee;
  --surface-raised: #ffffff;
  --surface-sunken: #ece7de;
  --surface-deep: #0f2e36;
  /* 深色底（島況列、頁首）上的狀態色。
     淺色主題的 --go/--hold/--stop 是給白底用的，放到深色底上對比只有
     2.0–2.25，遠低於 AA 的 4.5——不是「不夠明顯」而是根本讀不到。
     這三個值就是本設計系統深色主題用的同一組（對比 6.5–8.0），
     不是新發明的顏色。 */
  --go-on-deep: #5fd79f;
  --hold-on-deep: #f0b45c;
  --stop-on-deep: #ff9080;
  --surface-tint: #dff0ed;
  --ink: #1b2426;
  --ink-muted: #5a6a6d;
  --ink-faint: #7d8a8c;
  --ink-deep: #e8f1f0;
  --ink-deep-muted: #9fb6b8;
  --line: #dcd6cb;
  --line-strong: #928a7b;
  --tide: #0c7078;
  --on-tide: #ffffff;
  --tide-glow: #17c9b7;
  --wine: #9c3a2c;
  --on-wine: #ffffff;
  --sand: #c8862a;
  --on-sand: #2a1c05;
  --go: #186b43;
  --go-tint: #e2f0e8;
  --hold: #8a5200;
  --hold-tint: #f7ecd8;
  --stop: #a8281f;
  --stop-tint: #f8e5e2;
  --focus: #0b5fd0;
  --focus-invert: #ffd166;
  --overlay: rgba(9,14,17,0.62);
  --shadow-card: 0 1px 2px rgba(27,36,38,0.06), 0 6px 16px rgba(27,36,38,0.07);
  --shadow-lift: 0 2px 4px rgba(27,36,38,0.08), 0 14px 32px rgba(27,36,38,0.12);
  --shadow-glow: 0 0 0 1px rgba(23,201,183,0.38), 0 0 22px rgba(23,201,183,0.30);
}
[data-theme="dark"] {
  --surface: #0e1417;
  --surface-raised: #161e22;
  --surface-sunken: #090e11;
  --surface-deep: #071d24;
  --surface-tint: #0d2a2c;
  --ink: #edf2f1;
  --ink-muted: #a3b2b3;
  --ink-faint: #75868a;
  --ink-deep: #e8f1f0;
  --ink-deep-muted: #9fb6b8;
  --line: #232e33;
  --line-strong: #5a6a6f;
  --tide: #4fdccb;
  --on-tide: #05211e;
  --tide-glow: #7ff5e4;
  --wine: #f2947c;
  --on-wine: #2a0d07;
  --sand: #e0a64e;
  --on-sand: #2a1c05;
  --go: #5fd79f;
  --go-tint: #10281f;
  --hold: #f0b45c;
  --hold-tint: #2a2010;
  --stop: #ff9080;
  --stop-tint: #2c1512;
  --focus: #8fc0ff;
  --focus-invert: #ffd166;
  --overlay: rgba(4,9,11,0.72);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.55), 0 8px 22px rgba(0,0,0,0.45);
  --shadow-lift: 0 2px 6px rgba(0,0,0,0.6), 0 16px 36px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px rgba(127,245,228,0.34), 0 0 26px rgba(127,245,228,0.26);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --z-base: 0;
  --z-sticky: 100;
  --z-overlay: 400;
  --z-dialog: 500;
  --z-toast: 600;
  --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-serif: "Noto Serif TC", "Source Han Serif TC", "Songti TC", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.display-xl {
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 50px;
  font-weight: 700;
}
.display-l {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
}
.display-m {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 34px;
  font-weight: 700;
}
.title-l {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}
.title-m {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 25px;
  font-weight: 700;
}
.title-s {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
}
.body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 26px;
  font-weight: 400;
}
.body-s {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 21px;
  font-weight: 400;
}
.label {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}
.data-xl {
  font-family: var(--font-mono);
  font-size: 40px;
  line-height: 44px;
  font-weight: 600;
}
.data-l {
  font-family: var(--font-mono);
  font-size: 26px;
  line-height: 30px;
  font-weight: 600;
}
.data-m {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}
.data-s {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

/* 系統為深色偏好、且使用者未明確選淺色時，套用夜間主題 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0e1417;
    --surface-raised: #161e22;
    --surface-sunken: #090e11;
    --surface-deep: #071d24;
    --surface-tint: #0d2a2c;
    --ink: #edf2f1;
    --ink-muted: #a3b2b3;
    --ink-faint: #75868a;
    --ink-deep: #e8f1f0;
    --ink-deep-muted: #9fb6b8;
    --line: #232e33;
    --line-strong: #5a6a6f;
    --tide: #4fdccb;
    --on-tide: #05211e;
    --tide-glow: #7ff5e4;
    --wine: #f2947c;
    --on-wine: #2a0d07;
    --sand: #e0a64e;
    --on-sand: #2a1c05;
    --go: #5fd79f;
    --go-tint: #10281f;
    --hold: #f0b45c;
    --hold-tint: #2a2010;
    --stop: #ff9080;
    --stop-tint: #2c1512;
    --focus: #8fc0ff;
    --focus-invert: #ffd166;
    --overlay: rgba(4,9,11,0.72);
    --shadow-card: 0 1px 2px rgba(0,0,0,0.55), 0 8px 22px rgba(0,0,0,0.45);
    --shadow-lift: 0 2px 6px rgba(0,0,0,0.6), 0 16px 36px rgba(0,0,0,0.55);
    --shadow-glow: 0 0 0 1px rgba(127,245,228,0.34), 0 0 26px rgba(127,245,228,0.26);
  }
}

:root[data-theme="dark"] {
  --surface: #0e1417;
  --surface-raised: #161e22;
  --surface-sunken: #090e11;
  --surface-deep: #071d24;
  --surface-tint: #0d2a2c;
  --ink: #edf2f1;
  --ink-muted: #a3b2b3;
  --ink-faint: #75868a;
  --ink-deep: #e8f1f0;
  --ink-deep-muted: #9fb6b8;
  --line: #232e33;
  --line-strong: #5a6a6f;
  --tide: #4fdccb;
  --on-tide: #05211e;
  --tide-glow: #7ff5e4;
  --wine: #f2947c;
  --on-wine: #2a0d07;
  --sand: #e0a64e;
  --on-sand: #2a1c05;
  --go: #5fd79f;
  --go-tint: #10281f;
  --hold: #f0b45c;
  --hold-tint: #2a2010;
  --stop: #ff9080;
  --stop-tint: #2c1512;
  --focus: #8fc0ff;
  --focus-invert: #ffd166;
  --overlay: rgba(4,9,11,0.72);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.55), 0 8px 22px rgba(0,0,0,0.45);
  --shadow-lift: 0 2px 6px rgba(0,0,0,0.6), 0 16px 36px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px rgba(127,245,228,0.34), 0 0 26px rgba(127,245,228,0.26);
}