/* =============================================================================
   design-tokens.css — 跨表面設計 token 單一來源（Single Source of Truth）

   本檔是 5 個 token 家族的「上游」：
     --clinic-*  (Desktop Admin / 診所 / 藥局)  ← site.css 橋接
     --pliff-*   (病人 LIFF)                    ← patient-liff.css 橋接
     --liff-*    (員工 LIFF 打卡 / 出勤)        ← liff-clock.css / liff-my-record.css 橋接
     --jy-*      (公眾官網)                     ← public-site.css 橋接
     --spc-*     (iPad 自費簽署)                ← selfpay-console.css 橋接

   規則：
     - 禁止在其他 CSS 檔重新定義本檔已定義的 `--ds-*`（會造成漂移）
     - 禁止在 .cshtml 用 raw hex；必須用 var(--clinic-*) / var(--pliff-*) / ...
     - 新增 token 須在本檔定義，再於對應家族檔橋接

   權威依據：design-system/clinicservice/MASTER.md §2 色彩系統
   現況盤點：docs/design/DESIGN-SYSTEM.md
   規則：.cursor/rules/clinic-design-system.mdc
   ============================================================================= */

:root {
  /* ── 主色（Desktop / 官網 / iPad 自費共用）── */
  --ds-primary: #0f4c8a;            /* 海軍藍，WCAG AA 7.0:1 on white */
  --ds-primary-hover: #1364ad;
  --ds-primary-soft: #e6f0fa;
  --ds-primary-deep: #0a3560;       /* 官網用：footer / hero 漸層底 */

  /* ── 強調色（中度柔和藍，取代刺眼亮藍）── */
  --ds-accent: #2a6f96;             /* WCAG AA 雙向 5.51:1 */
  --ds-accent-soft: #e4eef4;

  /* ── 官網專用亮藍（accent 變體，僅 public-site 用）── */
  --ds-public-accent: #1da8e0;
  --ds-public-accent-soft: #e3f5fd;
  --ds-public-highlight: #f3a11b;     /* 官網專用亮橘（比 --ds-highlight 更亮，hero 視覺用）*/
  --ds-public-highlight-hover: #e09210;
  --ds-public-highlight-soft: #fff4e0;

  /* ── 金色亮點（highlight）── */
  --ds-highlight: #c98a36;          /* WCAG AA 5.61:1 */
  --ds-highlight-hover: #e09210;
  --ds-highlight-soft: #fff4e0;

  /* ── LINE 官方綠（僅 LIFF 通道）── */
  --ds-line-green: #06c755;
  --ds-line-green-hover: #05b54b;
  --ds-line-green-soft: #e8f8ee;
  /* 綠底上的文字色：白字對 #06c755 僅 ~2.04:1（未達 AA）；改用深綠字達 AA ≥ 4.5 */
  --ds-line-green-on: #052e17;

  /* ── 背景與表面 ── */
  --ds-bg: #f6fafd;                 /* 全站底色（clinic / public）*/
  --ds-bg-liff: #f6f8fa;            /* LIFF 通道底色（偏中性灰）*/
  --ds-bg-patient-liff: #f8fafb;    /* 病人 LIFF 略偏白 */
  --ds-surface: #ffffff;            /* 卡片面 */

  /* ── 文字 ── */
  --ds-text: #1f3447;               /* 深藍灰正文 */
  --ds-text-liff: #1a2b3c;          /* LIFF 通道用（略冷）*/
  --ds-muted: #4d6375;              /* 輔助文字，含 --ds-primary-soft 等淺色表面仍達 WCAG AA */
  --ds-muted-liff: #4d6375;         /* LIFF 輔助文字同步使用可在淺色表面辨識的顏色 */

  /* ── 邊框 ── */
  --ds-border: #d5e3ef;             /* 標準邊框 */
  --ds-border-liff: #e4eaf0;        /* LIFF 邊框 */

  /* ── 狀態色 ── */
  --ds-success: #0a7c6a;            /* 深青綠（取代刺眼亮綠）*/
  --ds-success-soft: #e6f5f1;
  --ds-danger: #c0392b;             /* 錯誤、違規 */
  --ds-danger-soft: #fdecea;
  --ds-warning-bg: #fff8e6;
  --ds-warning-text: #8a6d00;

  /* ── 圓角 ── */
  --ds-radius-sm: 6px;
  --ds-radius: 10px;
  --ds-radius-lg: 14px;
  --ds-radius-xl: 22px;             /* 官網 hero 用 */
  --ds-radius-liff: 16px;           /* LIFF 卡片 */
  --ds-radius-liff-lg: 20px;        /* LIFF 大卡片 */

  /* ── 陰影 ── */
  --ds-shadow-sm: 0 1px 2px rgba(15, 76, 138, 0.06);
  --ds-shadow: 0 2px 4px rgba(15, 76, 138, 0.06), 0 6px 18px rgba(15, 76, 138, 0.06);
  --ds-shadow-lg: 0 6px 14px rgba(15, 76, 138, 0.08), 0 14px 38px rgba(15, 76, 138, 0.10);
  --ds-shadow-liff: 0 2px 10px rgba(26, 43, 60, 0.05);
  --ds-shadow-liff-clock: 0 2px 12px rgba(26, 43, 60, 0.06);
  --ds-shadow-public: 0 4px 24px rgba(15, 76, 138, 0.08);
  --ds-shadow-public-lg: 0 12px 40px rgba(15, 76, 138, 0.12);

  /* ── 轉場（Skill Motion tier 3：Subtle）── */
  --ds-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Spacing（Skill Density 7/10 標準）── */
  --ds-space-xs: 4px;
  --ds-space-sm: 8px;
  --ds-space-md: 16px;
  --ds-space-lg: 24px;
  --ds-space-xl: 32px;
  --ds-space-2xl: 48px;

  /* ── 元件層 ── */
  --ds-input-height: 42px;
  --ds-btn-height: 42px;
  --ds-btn-height-lg: 52px;
  --ds-btn-height-sm: 1.75rem;
  --ds-btn-min-contrast: 4.5;
  --ds-btn-border-radius-sm: var(--bs-border-radius-sm, 0.25rem);
  --ds-header-height: 56px;
  --ds-sidebar-width: 180px;
  --ds-card-padding: 1.25rem;
  --ds-card-gap: 1rem;

  /* ── Focus ring（Skill Focus States / focus-visible）── */
  --ds-focus-ring: 0 0 0 3px var(--ds-primary-soft);

  /* ── Z-index scale（Skill Z-Index Management High）── */
  --ds-z-dropdown: 10;
  --ds-z-sticky: 20;
  --ds-z-fixed: 30;
  --ds-z-modal-backdrop: 40;
  --ds-z-modal: 50;
  --ds-z-toast: 60;
  --ds-z-tooltip: 70;

  /* ── 字體（全站共用；詳細 fallback 見各 Layout）── */
  --ds-font-sans: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "微軟正黑體", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/*
  淺色為預設。暗色變體見 design-tokens-dark.css，僅在
  html[data-theme="dark"] 時覆寫；禁止用 prefers-color-scheme 自動切換。
*/