/* ============================================
   Nextstar_Register 主題變數系統
   Version: 1.0.0
   Description: 全站顏色統一管理
   ============================================ */

:root {
  /* ========== 核心主色系 ========== */
  /* 用途：主按鈕、標題圖示、強調元素、連結 */
  --primary-color: #4caf50;
  
  /* 用途：漸層輔色、hover深色背景 */
  --primary-dark: #388e3c;
  
  /* 用途：按鈕 hover 狀態 */
  --primary-hover: #45a049;
  
  /* 用途：淺色變體（備用） */
  --primary-light: #66bb6a;
  
  
  /* ========== 核心漸層 ========== */
  /* 用途：導航欄、卡片標題、主按鈕背景 */
  --primary-gradient: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
  
  
  /* ========== 文字顏色系統 ========== */
  /* 用途：主要文字色 */
  --text-primary: #333;
  
  /* 用途：次要文字、標籤 */
  --text-secondary: #666;
  
  /* 用途：提示文字、placeholder */
  --text-tertiary: #999;
  
  
  /* ========== 維護模式專用 ========== */
  /* 用途：維護頁面漸層 */
  --maintenance-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --maintenance-color-1: #667eea;
  --maintenance-color-2: #764ba2;
  
  
  /* ========== 背景色系統（保持不變） ========== */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #fafafa;
  --bg-input: #f9f9f9;
  
  
  /* ========== 邊框與分隔線（保持不變） ========== */
  --border-light: #e0e0e0;
  --border-medium: #ddd;
  --border-dark: #ccc;
  
  
  /* ========== 陰影系統 ========== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);
  
  /* 主色陰影（動態跟隨主色） */
  --shadow-primary: 0 4px 12px rgba(76, 175, 80, 0.3);
  --shadow-primary-lg: 0 6px 20px rgba(76, 175, 80, 0.4);
  --shadow-focus: 0 0 0 4px rgba(76, 175, 80, 0.1);
  --shadow-focus-sm: 0 0 0 3px rgba(76, 175, 80, 0.1);
  --shadow-soft: 0 2px 8px rgba(76, 175, 80, 0.2);
  
  
  /* ========== 錯誤與警告色（保持不變） ========== */
  --error-color: #f44336;
  --error-light: #ffebee;
  --error-border: #ffcdd2;
  
  --warning-color: #ffc107;
  --warning-bg: #fff3cd;
  --warning-text: #856404;
  
  --success-color: #4caf50;
  --success-light: #e8f5e9;
  --success-dark: #2e7d32;
  --success-border: #c8e6c9;
  
  --info-color: #2196F3;
}


/* ============================================
   主題切換：藍色主題
   自動套用機制：修改 theme-config.json 的 ActiveTheme 為 "blue" 即可
   ============================================ */
body.theme-blue,
html.theme-blue {
  --primary-color: #2196F3;
  --primary-dark: #1976D2;
  --primary-hover: #1E88E5;
  --primary-light: #42A5F5;
  --primary-gradient: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  
  /* 藍色陰影（動態跟隨主色） */
  --shadow-primary: 0 4px 12px rgba(33, 150, 243, 0.3);
  --shadow-primary-lg: 0 6px 20px rgba(33, 150, 243, 0.4);
}


/* ============================================
   更多主題範例
   規則：class 名稱必須是 theme-{主題名稱}
   ============================================ */

/* ========== 紫色主題 ========== */
body.theme-purple,
html.theme-purple {
  --primary-color: #9C27B0;
  --primary-dark: #7B1FA2;
  --primary-hover: #8E24AA;
  --primary-light: #BA68C8;
  --primary-gradient: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
  --shadow-primary: 0 4px 12px rgba(156, 39, 176, 0.3);
  --shadow-primary-lg: 0 6px 20px rgba(156, 39, 176, 0.4);
}

/* ========== 橙色主題 ========== */
body.theme-orange,
html.theme-orange {
  --primary-color: #FF9800;
  --primary-dark: #F57C00;
  --primary-hover: #FB8C00;
  --primary-light: #FFB74D;
  --primary-gradient: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
  --shadow-primary: 0 4px 12px rgba(255, 152, 0, 0.3);
  --shadow-primary-lg: 0 6px 20px rgba(255, 152, 0, 0.4);
}

/* ========== 紅色主題 ========== */
body.theme-red,
html.theme-red {
  --primary-color: #F44336;
  --primary-dark: #D32F2F;
  --primary-hover: #E53935;
  --primary-light: #EF5350;
  --primary-gradient: linear-gradient(135deg, #F44336 0%, #D32F2F 100%);
  --shadow-primary: 0 4px 12px rgba(244, 67, 54, 0.3);
  --shadow-primary-lg: 0 6px 20px rgba(244, 67, 54, 0.4);
}

/* ========== 青色主題 ========== */
body.theme-teal,
html.theme-teal {
  --primary-color: #009688;
  --primary-dark: #00796B;
  --primary-hover: #00897B;
  --primary-light: #4DB6AC;
  --primary-gradient: linear-gradient(135deg, #009688 0%, #00796B 100%);
  --shadow-primary: 0 4px 12px rgba(0, 150, 136, 0.3);
  --shadow-primary-lg: 0 6px 20px rgba(0, 150, 136, 0.4);
}

/* ========== 深藍主題 ========== */
body.theme-indigo,
html.theme-indigo {
  --primary-color: #3F51B5;
  --primary-dark: #303F9F;
  --primary-hover: #3949AB;
  --primary-light: #5C6BC0;
  --primary-gradient: linear-gradient(135deg, #3F51B5 0%, #303F9F 100%);
  --shadow-primary: 0 4px 12px rgba(63, 81, 181, 0.3);
  --shadow-primary-lg: 0 6px 20px rgba(63, 81, 181, 0.4);
}


/* ============================================
   響應式設計變數（可選）
   ============================================ */
@media (max-width: 768px) {
  :root {
    /* 手機版可以調整陰影大小 */
    --shadow-primary: 0 2px 8px rgba(76, 175, 80, 0.2);
  }
}