/* ═══════════════════════════════════════════════════
   SWT 逆轉科技 — Design Tokens（方向 1b「微光智能」）
   交付對象：Claude Code / Vue 3
   用法：import 後直接以 var(--swt-*) 使用；
   Tailwind 可映射至 theme.extend.colors 等。
   ═══════════════════════════════════════════════════ */
:root {
  /* ── 色彩：品牌 ── */
  --swt-primary: #6D5AE6;
  --swt-primary-hover: #5B49CC;
  --swt-primary-light: #8B7BF0;
  --swt-gradient-primary: linear-gradient(135deg, #6D5AE6, #8B7BF0);
  --swt-accent-ai: #22B8A6;          /* AI 輔助元素專用 */
  --swt-accent-ai-deep: #0E8074;

  /* ── 色彩：中性 ── */
  --swt-text: #1B1830;
  --swt-text-muted: #55516E;
  --swt-text-faint: #9A94BC;
  --swt-border: #E3E1F5;
  --swt-border-input: #D9D6EE;
  --swt-bg: linear-gradient(160deg, #F7F6FD 0%, #F2F4FC 55%, #EEF4FB 100%);
  --swt-bg-flat: #F5F5FC;            /* 無法用漸層時的替代 */
  --swt-surface: rgba(255, 255, 255, 0.7);   /* 玻璃卡片 */
  --swt-surface-solid: #FFFFFF;
  --swt-disabled-bg: #ECEAF6;
  --swt-disabled-text: #A5A0C2;

  /* ── 色彩：語意狀態（badge = 底色 + 文字 + 邊框）── */
  --swt-success: #0E8074;
  --swt-success-bg: rgba(34, 184, 166, 0.12);
  --swt-success-border: rgba(34, 184, 166, 0.35);
  --swt-pending: #5B49CC;
  --swt-pending-bg: rgba(109, 90, 230, 0.10);
  --swt-pending-border: rgba(109, 90, 230, 0.30);
  --swt-danger: #C13456;
  --swt-danger-bg: rgba(224, 73, 105, 0.10);
  --swt-danger-border: rgba(224, 73, 105, 0.30);
  --swt-warning: #B45309;
  --swt-warning-bg: rgba(245, 158, 11, 0.12);

  /* ── 字體 ── */
  --swt-font-display: 'Space Grotesk', 'Noto Sans TC', sans-serif; /* 標題/數字 */
  --swt-font-body: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --swt-text-xs: 12px; --swt-text-sm: 13px; --swt-text-base: 14px;
  --swt-text-lg: 16px; --swt-text-xl: 20px; --swt-text-2xl: 26px;
  --swt-leading-body: 1.7;

  /* ── 間距（4px 基準）── */
  --swt-space-1: 4px; --swt-space-2: 8px; --swt-space-3: 12px;
  --swt-space-4: 16px; --swt-space-5: 24px; --swt-space-6: 32px;
  --swt-space-7: 48px;

  /* ── 圓角 ── */
  --swt-radius-sm: 8px;    /* badge、小元件 */
  --swt-radius-md: 10px;   /* 按鈕、輸入框 */
  --swt-radius-lg: 14px;   /* 卡片 */
  --swt-radius-xl: 16px;   /* 大容器 */
  --swt-radius-full: 999px;

  /* ── 陰影與玻璃感 ── */
  --swt-shadow-card: 0 8px 24px rgba(109, 90, 230, 0.08);
  --swt-shadow-card-lg: 0 12px 32px rgba(109, 90, 230, 0.14);
  --swt-shadow-btn: 0 4px 14px rgba(109, 90, 230, 0.30);
  --swt-shadow-btn-hover: 0 6px 20px rgba(109, 90, 230, 0.45);
  --swt-blur-glass: blur(8px);       /* 搭配 --swt-surface */
  --swt-focus-ring: 0 0 0 3px rgba(109, 90, 230, 0.15);

  /* ── 動效 ── */
  --swt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --swt-duration: 180ms;
}

/* ═══ Component 規格（供實作參考）═══
Button.primary   : bg=gradient-primary, 白字, radius-md, padding 9px 18px,
                   shadow-btn → hover shadow-btn-hover, 14px/500, white-space nowrap
Button.secondary : bg=surface(玻璃)+blur, 邊框 border-input, hover 邊框變 primary
Button.ghost     : 透明, hover bg=pending-bg
Button.disabled  : bg=disabled-bg, 文字 disabled-text, cursor not-allowed
Input / Select   : 邊框 border-input, radius-md, padding 9px 12px, 14px;
                   focus → 邊框 primary + focus-ring；error → 邊框 danger
Label            : 13px/500 text-muted；必填以 danger 色 * 標示
Badge(狀態)      : radius-full, 12px/500, padding 3px 10px,
                   已核准=success 三件組 / 待審核=pending / 已拒絕=danger
Card             : bg=surface + blur-glass, 邊框 border, radius-lg, shadow-card
Table row        : 高 56px, hover bg rgba(109,90,230,.04), 分隔線 border
AI 輔助文字      : accent-ai-deep 色 + 前綴「✦」
═══════════════════════════════════════ */