/* 淡江 App 業務語意色(主題感知)。 * 全對齊 zoo:值一律引用 zoo 色階;light / dark 各指不同階, * 暗色用較亮的階(如 500 → 400),讓業務色在深底上仍顯眼——比照 zoo 語意色的翻轉方式。 * 灰一律取 neutral(純灰階、不帶藍調),與 --surface-* 同家族;見 Design/Principles。 * 主題 class 掛在 (= :root 同元素),故此處 var(--green-500) 等 primitive 解析得到。 */ .theme-light { /* 交通狀態 Traffic */ --app-traffic-free: var(--green-500); --app-traffic-busy: var(--yellow-500); --app-traffic-slow: var(--orange-500); --app-traffic-jam: var(--red-600); --app-traffic-block: var(--red-900); /* 人群密集度 Density */ --app-density-sparse: var(--violet-200); --app-density-moderate: var(--violet-400); --app-density-crowded: var(--violet-600); /* 告警 Severity */ --app-severity-critical: var(--red-500); --app-severity-warning: var(--orange-500); --app-severity-ok: var(--teal-500); /* 「系統」用純灰階(neutral),不用 slate/gray —— 那兩個色系的灰帶藍調, 跟介面的中性灰放在一起會顯出色偏。同理見 --app-chart-4。 */ --app-severity-system: var(--neutral-400); --app-severity-info: var(--violet-400); /* 圖表序列 Chart */ --app-chart-1: var(--blue-700); --app-chart-2: var(--violet-500); --app-chart-3: var(--pink-600); --app-chart-4: var(--neutral-600); /* 裝置啟用 hero（ApAddDevice 第一階段，400 寬）。 光源右上、徑向；light 與 dark 同角度同結構，只換色階 —— 兩個模式是同一個設計的 兩種天氣，不是兩個設計。見 docs/superpowers/specs/2026-07-17-add-device-dialog-design.md。 已知取捨：深底才襯得出藍光，light 版張力必然弱於 dark 版；Wendy 以 light mode 整體一致性優先，此為知情選擇（曾評估「hero 兩模式都維持深色」與「light 用飽和藍」）。 */ --app-activation-hero-gradient: radial-gradient(120% 90% at 78% -8%, var(--blue-100) 0%, var(--blue-50) 30%, var(--surface-0) 60%, var(--surface-0) 100%); --app-activation-hero-text: var(--neutral-900); --app-activation-hero-text-muted: var(--neutral-600); --app-activation-hero-accent: var(--blue-700); /* 第二階段的裝置卡:延續 hero 的漸層感 —— 同一顆光源、同一個角度(120% 90% at 78% -8%), 只是收在 --surface-100 而非 --surface-0,否則卡片底部會融進面板、失去區塊感。 */ --app-activation-card-gradient: radial-gradient(120% 90% at 78% -8%, var(--blue-100) 0%, var(--blue-50) 38%, var(--surface-100) 72%, var(--surface-100) 100%); --app-activation-card-badge-bg: var(--blue-100); --app-activation-card-badge-fg: var(--blue-700); --app-activation-card-badge-warn-bg: var(--orange-100); --app-activation-card-badge-warn-fg: var(--orange-700); } .theme-dark { /* 交通狀態 Traffic(較亮階) */ --app-traffic-free: var(--green-400); --app-traffic-busy: var(--yellow-400); --app-traffic-slow: var(--orange-400); --app-traffic-jam: var(--red-500); --app-traffic-block: var(--red-700); /* 人群密集度 Density */ --app-density-sparse: var(--violet-300); --app-density-moderate: var(--violet-400); --app-density-crowded: var(--violet-300); /* 告警 Severity(較亮階) */ --app-severity-critical: var(--red-400); --app-severity-warning: var(--orange-400); --app-severity-ok: var(--teal-400); --app-severity-system: var(--neutral-300); --app-severity-info: var(--violet-300); /* 圖表序列 Chart(較亮階) */ --app-chart-1: var(--blue-400); --app-chart-2: var(--violet-400); --app-chart-3: var(--pink-400); --app-chart-4: var(--neutral-400); /* 裝置啟用 hero —— 同 light 的光源與角度，深色階（理由見 .theme-light 的註解）。 這裡不是「light 的較亮階」而是較暗階：hero 反其道而行，深底是它的張力來源。 */ --app-activation-hero-gradient: radial-gradient(120% 90% at 78% -8%, var(--blue-500) 0%, var(--blue-800) 25%, var(--blue-950) 47%, var(--neutral-950) 73%, var(--neutral-950) 100%); --app-activation-hero-text: var(--surface-0); --app-activation-hero-text-muted: var(--neutral-400); --app-activation-hero-accent: var(--blue-400); /* 裝置卡 —— 同 light 的光源與角度,深色階(見 .theme-light 註解)。 比 hero 收斂:hero 是主角,卡片只是襯底的區塊。 ⚠️ 這裡不能用 --surface-*:那組色階在**兩個主題都是近白**(#fafafa/#f5f5f5), dark 底下它是拿來當文字色的(見上方 --app-activation-hero-text)。拿它當底色會 變成白卡配白字。底色要用 --neutral-700(#404040),比 --dialog-background (#262626)亮一階,卡片才分得出來。 */ --app-activation-card-gradient: radial-gradient(120% 90% at 78% -8%, var(--blue-800) 0%, var(--blue-950) 35%, var(--neutral-700) 75%, var(--neutral-700) 100%); --app-activation-card-badge-bg: var(--blue-900); --app-activation-card-badge-fg: var(--blue-300); --app-activation-card-badge-warn-bg: var(--orange-900); --app-activation-card-badge-warn-fg: var(--orange-300); }