/**
 * 全域主題色彩變數
 * Theme Color Variables
 * 
 * 使用方式：在 CSS 中使用 var(--primary) 等變數
 * 更換色系時只需修改此檔案即可全站套用
 */

:root {
   /* ============================================
       主要色彩 (Primary Colors)
       用於主要按鈕、強調元素、連結等
       ============================================ */
   --primary: #667eea;
   --primary-dark: #764ba2;
   --primary-light: #818cf8;
   --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   --primary-gradient-hover: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
   --primary-shadow: rgba(102, 126, 234, 0.3);
   --primary-shadow-hover: rgba(102, 126, 234, 0.4);
   --primary-bg-light: rgba(102, 126, 234, 0.1);

   /* ============================================
       成功色 (Success Colors)
       用於成功狀態、通過、確認等
       ============================================ */
   --success: #22c55e;
   --success-dark: #16a34a;
   --success-light: #4ade80;
   --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
   --success-bg-light: #f0fdf4;

   /* ============================================
       警告色 (Warning Colors)
       用於警告、提醒、注意等
       ============================================ */
   --warning: #f59e0b;
   --warning-dark: #d97706;
   --warning-light: #fbbf24;
   --warning-bg-light: #fef3c7;
   --warning-text: #92400e;

   /* ============================================
       危險色 (Danger Colors)
       用於錯誤、刪除、危險操作等
       ============================================ */
   --danger: #ef4444;
   --danger-dark: #dc2626;
   --danger-light: #f87171;
   --danger-bg-light: #fef2f2;

   /* ============================================
       資訊色 (Info Colors)
       用於資訊提示、連結等
       ============================================ */
   --info: #3b82f6;
   --info-dark: #2563eb;
   --info-light: #60a5fa;
   --info-bg-light: #eff6ff;

   /* ============================================
       中性色 (Neutral Colors)
       用於文字、邊框、背景等
       ============================================ */
   /* 文字色 */
   --text-primary: #1e293b;
   --text-secondary: #475569;
   --text-muted: #64748b;
   --text-light: #94a3b8;

   /* 邊框色 */
   --border-light: #e2e8f0;
   --border-medium: #cbd5e1;
   --border-dark: #94a3b8;

   /* 背景色 */
   --bg-white: #ffffff;
   --bg-light: #f8fafc;
   --bg-medium: #f1f5f9;
   --bg-dark: #e2e8f0;

   /* ============================================
       陰影 (Shadows)
       ============================================ */
   --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
   --shadow-primary: 0 4px 15px var(--primary-shadow);
   --shadow-primary-hover: 0 6px 20px var(--primary-shadow-hover);

   /* ============================================
       圓角 (Border Radius)
       ============================================ */
   --radius-sm: 6px;
   --radius-md: 10px;
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-full: 9999px;

   /* ============================================
       過渡動畫 (Transitions)
       ============================================ */
   --transition-fast: all 0.2s ease;
   --transition-normal: all 0.3s ease;
   --transition-slow: all 0.5s ease;
}

/* ============================================
   深色模式 (Dark Mode) - 預留
   ============================================ */
@media (prefers-color-scheme: dark) {
   :root {
      /* 深色模式變數可在此覆蓋 */
   }
}