/**
 * 設計 Token：全站色調、字級、間距、卡片、按鈕、表格基準。
 * 其他 .css 請以 var(--sw-*) 引用，避免硬寫色碼。
 * 預設為淺色主題（對齊預約頁 bk-accordion-shell）。
 */

:root {
  /* 品牌色 */
  --sw-primary: #0284c7;
  --sw-primary-dark: #0369a1;
  --sw-primary-deep: #0c4a6e;
  --sw-accent: #0ea5e9;

  /* 文字 */
  --sw-text: #0f172a;
  --sw-text-muted: #475569;
  --sw-text-subtle: #64748b;
  --sw-text-on-hdr: var(--sw-primary-deep);
  --sw-text-on-panel: var(--sw-text-muted);

  /* 表面 */
  --sw-surface: #ffffff;
  --sw-surface-muted: #f8fafc;
  --sw-surface-subtle: #f1f5f9;
  --sw-surface-mobile: #f1f5f9;
  --sw-border: #e2e8f0;
  --sw-border-strong: #cbd5e1;

  /* 背景 */
  --sw-bg-app: #e8edf3;
  --sw-bg-body: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --sw-bg-mobile: #e8edf3;

  /* 漸層／面板（淺色） */
  --sw-gradient-hdr: linear-gradient(180deg, #f8fafc 0%, #f0f9ff 55%, #e0f2fe 100%);
  --sw-gradient-panel: linear-gradient(180deg, #f8fafc 0%, #f0f9ff 55%, #e0f2fe 100%);
  --sw-gradient-panel-soft: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  --sw-gradient-tabs: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --sw-gradient-btn: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  --sw-gradient-thead: #f8fafc;

  /* 橫幅按鈕 */
  --sw-hdr-btn-bg: #ffffff;
  --sw-hdr-btn-text: var(--sw-primary-dark);
  --sw-hdr-btn-border: var(--sw-border-strong);

  /* 工具列 */
  --sw-toolbar-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(2, 132, 199, 0.08);
  --sw-toolbar-border: 1px solid var(--sw-border);

  /* 狀態列（對齊預約 hint） */
  --sw-status-ok-bg: #ecfdf5;
  --sw-status-ok-text: #166534;
  --sw-status-ok-border: #bbf7d0;
  --sw-status-warn-bg: #fffbeb;
  --sw-status-warn-text: #92400e;
  --sw-status-warn-border: #fde68a;

  /* 字級 */
  --sw-font-family: 'Microsoft JhengHei', 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Apple Color Emoji', 'Noto Color Emoji', Arial, sans-serif;
  --sw-font-xs: 11px;
  --sw-font-sm: 12px;
  --sw-font-base: 13px;
  --sw-font-md: 14px;
  --sw-font-lg: 15px;
  --sw-font-xl: 18px;
  --sw-font-2xl: 1.15rem;
  --sw-font-page-title: 1.25rem;
  --sw-font-hdr: 26px;

  /* 間距 */
  --sw-space-1: 4px;
  --sw-space-2: 8px;
  --sw-space-3: 12px;
  --sw-space-4: 16px;
  --sw-space-5: 20px;
  --sw-space-6: 24px;
  --sw-body-pad: clamp(12px, 2vw, 20px);
  --sw-pane-pad: 24px;
  --sw-mobile-pane-pad: 10px;
  --sw-mobile-nav-h: 64px;
  --sw-mobile-body-bottom: calc(var(--sw-mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 12px);

  /* 圓角 */
  --sw-radius-sm: 8px;
  --sw-radius-md: 12px;
  --sw-radius-lg: 14px;
  --sw-radius-xl: 20px;

  /* 陰影 */
  --sw-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --sw-shadow-md: 0 4px 20px rgba(15, 23, 42, 0.08);
  --sw-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
  --sw-shadow-wrap: 0 4px 24px rgba(15, 23, 42, 0.08);
  --sw-shadow-btn: 0 2px 8px rgba(2, 132, 199, 0.2);
  --sw-shadow-card: 0 2px 12px rgba(15, 23, 42, 0.06);

  /* 卡片／列表容器 */
  --sw-card-bg: #fff;
  --sw-card-border: 1px solid var(--sw-border);
  --sw-card-radius: var(--sw-radius-lg);

  /* 表格 */
  --sw-table-font: var(--sw-font-base);
  --sw-table-th-font: var(--sw-font-sm);
  --sw-table-cell-pad-y: 10px;
  --sw-table-cell-pad-x: 10px;
  --sw-table-row-hover: #f0f9ff;
  --sw-table-th-color: var(--sw-text-muted);
  --sw-table-th-border: 2px solid var(--sw-border);

  /* 按鈕 */
  --sw-btn-pad-y: 12px;
  --sw-btn-pad-x: 20px;
  --sw-btn-font: var(--sw-font-md);
  --sw-btn-radius: 10px;
  --sw-btn-min-h: 44px;

  /* 手機殼層（由 JS 切換 html.sw-mobile-ui） */
  --sw-mobile-vv-bottom-gap: 0px;

  /* 語意色 */
  --sw-success: #10b981;
  --sw-warning: #f59e0b;
  --sw-danger: #ef4444;
  --sw-info: #3b82f6;

  /* AI 狀態 */
  --sw-ai-ok: #0d9488;
  --sw-ai-warn: #d97706;
  --sw-ai-err: #dc2626;
  --sw-ai-muted: #64748b;
}

[data-theme='dark'] {
  --sw-primary: #38bdf8;
  --sw-primary-dark: #0ea5e9;
  --sw-primary-deep: #075985;
  --sw-accent: #7dd3fc;
  --sw-text: #f1f5f9;
  --sw-text-muted: #94a3b8;
  --sw-text-subtle: #94a3b8;
  --sw-text-on-hdr: #f1f5f9;
  --sw-text-on-panel: rgba(255, 255, 255, 0.95);
  --sw-border: #334155;
  --sw-border-strong: #475569;
  --sw-surface: #1e293b;
  --sw-surface-subtle: #1e293b;
  --sw-surface-muted: #1e293b;
  --sw-bg-app: linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #0ea5e9 100%);
  --sw-bg-body: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  --sw-gradient-hdr: linear-gradient(135deg, #0c4a6e 0%, #0284c7 100%);
  --sw-gradient-panel: linear-gradient(135deg, #0c4a6e 0%, #0284c7 100%);
  --sw-gradient-panel-soft: linear-gradient(135deg, #075985 0%, #0ea5e9 100%);
  --sw-gradient-tabs: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  --sw-gradient-thead: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  --sw-hdr-btn-bg: rgba(255, 255, 255, 0.15);
  --sw-hdr-btn-text: #fff;
  --sw-hdr-btn-border: rgba(255, 255, 255, 0.3);
  --sw-table-th-color: #fff;
  --sw-shadow-wrap: 0 25px 80px rgba(0, 0, 0, 0.35);
}