/* ============================================================================= design-tokens-dark.css — 暗色變體（預設不啟用）啟用方式：在或設 data-theme="dark" 禁止：用 prefers-color-scheme: dark 自動切換（clinic-design-system 禁深色模式預設）結構借用 UI UX Pro Max Skill colors.csv dark palette（Background/Card/Muted/Border），色值以專案海軍藍為基底調暗，非 Skill 預設 teal/indigo。對比門檻（Skill）： - Primary text ≥ 4.5:1 on dark surface - Secondary (muted) ≥ 3:1 - Border 在 dark 仍可見（rgba white 0.08+） ============================================================================= */ html[data-theme="dark"], [data-theme="dark"] { --ds-primary: #3a7fc9; --ds-primary-hover: #5a96d4; --ds-primary-soft: #1a334f; --ds-primary-deep: #0a1628; --ds-accent: #5a9bb8; --ds-accent-soft: #1a2f3d; --ds-public-accent: #3db8e8; --ds-public-accent-soft: #163040; --ds-public-highlight: #e0b04a; --ds-public-highlight-hover: #f0c060; --ds-public-highlight-soft: #3a3020; --ds-highlight: #d4a04a; --ds-highlight-hover: #e0b04a; --ds-highlight-soft: #3a3020; --ds-line-green: #1dcf6a; --ds-line-green-hover: #2ae07a; --ds-line-green-soft: #143528; --ds-line-green-on: #052e17; --ds-bg: #0f1a2e; --ds-bg-liff: #121c2e; --ds-bg-patient-liff: #121c2e; --ds-surface: #162236; --ds-text: #e8eef6; --ds-text-liff: #e8eef6; --ds-muted: #8aa0b8; --ds-muted-liff: #8aa0b8; --ds-border: rgba(255, 255, 255, 0.12); --ds-border-liff: rgba(255, 255, 255, 0.10); --ds-success: #2db89a; --ds-success-soft: #14352e; --ds-danger: #e57373; --ds-danger-soft: #3a2020; --ds-warning-bg: #3a3020; --ds-warning-text: #e0c060; --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --ds-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.25); --ds-shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.4), 0 14px 38px rgba(0, 0, 0, 0.3); --ds-shadow-liff: 0 2px 10px rgba(0, 0, 0, 0.35); --ds-shadow-liff-clock: 0 2px 12px rgba(0, 0, 0, 0.4); --ds-shadow-public: 0 4px 24px rgba(0, 0, 0, 0.4); --ds-shadow-public-lg: 0 12px 40px rgba(0, 0, 0, 0.45); --ds-focus-ring: 0 0 0 3px rgba(58, 127, 201, 0.45); color-scheme: dark; } [data-theme="dark"] body, html[data-theme="dark"] body { background: var(--ds-bg); color: var(--ds-text); }