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

:root {
  /* ========== 核心主色系（品牌綠） ========== */
  /* 用途：主按鈕、標題、連結、強調元素 */
  --primary-color: #4caf50;
  
  /* 用途：漸層輔色、hover深色背景、次要按鈕 */
  --primary-dark: #388e3c;
  
  /* 用途：按鈕 hover 狀態、互動反饋 */
  --primary-hover: #45a049;
  
  /* 用途：淺色變體、邊框、分隔線 */
  --primary-light: #66bb6a;
  
  /* 用途：更深的綠色（某些深色場景） */
  --primary-darker: #2e7d32;
  
  
  /* ========== 核心漸層 ========== */
  /* 用途：登入、註冊、側欄、會員中心、主視覺 */
  --primary-gradient: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
  
  
  /* ========== 結帳與購物車專用色系 ========== */
  /* 用途：結帳頁面主按鈕、購物車強調元素 */
  --checkout-primary: #00a651;
  
  /* 用途：結帳按鈕 hover、深色狀態 */
  --checkout-primary-dark: #008a43;
  
  
  /* ========== 淺色背景系統 ========== */
  /* 用途：提示區、側欄、結帳區塊淺綠底色 */
  --bg-primary-lightest: #e8f5e9;
  --bg-primary-light: #f0f7f0;
  --bg-primary-soft: #f1f8f4;
  
  /* 用途：一般背景 */
  --bg-white: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #fafafa;
  --bg-input: #f9f9f9;
  
  
  /* ========== 邊框與強調線 ========== */
  /* 用途：卡片、表單、分隔線 */
  --border-primary: #a5d6a7;
  --border-primary-light: #c8e6c9;
  --border-light: #e0e0e0;
  --border-medium: #ddd;
  --border-dark: #ccc;
  
  
  /* ========== 文字顏色系統 ========== */
  /* 用途：主要文字色 */
  --text-primary: #333;
  
  /* 用途：次要文字、標籤 */
  --text-secondary: #666;
  
  /* 用途：提示文字、placeholder */
  --text-tertiary: #999;
  
  /* 用途：主色系文字、連結 */
  --text-brand: #4caf50;
  --text-brand-dark: #2e7d32;
  
  
  /* ========== 成功/狀態色系（對齊 Bootstrap） ========== */
  /* Bootstrap 對齊用：覆寫 .btn-success、.text-success 等 */
  --success-color: #28a745;
  --success-light: #d1e7dd;
  --success-dark: #0f5132;
  --success-border: #c8e6c9;
  
  /* Bootstrap 5 原生 success 色（用於對齊第三方元件） */
  --bs-success: #198754;
  
  
  /* ========== 錯誤與警告色（保持不變） ========== */
  --error-color: #f44336;
  --error-light: #ffebee;
  --error-border: #ffcdd2;
  --error-dark: #d32f2f;
  
  --warning-color: #ffc107;
  --warning-bg: #fff3cd;
  --warning-text: #856404;
  --warning-border: #ffeaa7;
  
  --info-color: #2196F3;
  --info-light: #e3f2fd;
  --info-dark: #1976D2;
  
  
  /* ========== 陰影系統 ========== */
  --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-hover: 0 6px 16px rgba(76, 175, 80, 0.25);
  
  
  /* ========== Spinner/Loading 顏色 ========== */
  --spinner-color: #4caf50;
  
  
  /* ========== 圓角與間距（可選） ========== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 50%;
}


/* ============================================
   Bootstrap Success 變數覆寫（對齊品牌色）
   讓 Bootstrap 的 success 類別使用品牌綠色
   ============================================ */
:root {
  --bs-success: var(--primary-color);
  --bs-success-rgb: 76, 175, 80;
}


/* ============================================
   主題切換：藍色主題
   自動套用機制：修改 theme-config.json 的 ActiveTheme 為 "blue" 即可
   ============================================ */
body.theme-blue,
html.theme-blue {
  --primary-color: #2196F3;
  --primary-dark: #1976D2;
  --primary-hover: #1E88E5;
  --primary-light: #42A5F5;
  --primary-darker: #1565C0;
  --primary-gradient: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  
  --checkout-primary: #2196F3;
  --checkout-primary-dark: #1976D2;
  
  --bg-primary-lightest: #e3f2fd;
  --bg-primary-light: #f0f7ff;
  --bg-primary-soft: #f5f9ff;
  
  --border-primary: #90caf9;
  --border-primary-light: #bbdefb;
  
  --text-brand: #2196F3;
  --text-brand-dark: #1565C0;
  
  --shadow-primary: 0 4px 12px rgba(33, 150, 243, 0.3);
  --shadow-primary-lg: 0 6px 20px rgba(33, 150, 243, 0.4);
  --shadow-focus: 0 0 0 4px rgba(33, 150, 243, 0.1);
  --shadow-hover: 0 6px 16px rgba(33, 150, 243, 0.25);
  
  --spinner-color: #2196F3;
  
  --bs-success: #2196F3;
  --bs-success-rgb: 33, 150, 243;
}


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

/* ========== 紫色主題 ========== */
body.theme-purple,
html.theme-purple {
  --primary-color: #9C27B0;
  --primary-dark: #7B1FA2;
  --primary-hover: #8E24AA;
  --primary-light: #BA68C8;
  --primary-darker: #6A1B9A;
  --primary-gradient: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
  
  --checkout-primary: #9C27B0;
  --checkout-primary-dark: #7B1FA2;
  
  --bg-primary-lightest: #f3e5f5;
  --bg-primary-light: #f8f0fa;
  --bg-primary-soft: #faf5fc;
  
  --border-primary: #ce93d8;
  --border-primary-light: #e1bee7;
  
  --text-brand: #9C27B0;
  --text-brand-dark: #6A1B9A;
  
  --shadow-primary: 0 4px 12px rgba(156, 39, 176, 0.3);
  --shadow-primary-lg: 0 6px 20px rgba(156, 39, 176, 0.4);
  --shadow-focus: 0 0 0 4px rgba(156, 39, 176, 0.1);
  --shadow-hover: 0 6px 16px rgba(156, 39, 176, 0.25);
  
  --spinner-color: #9C27B0;
  
  --bs-success: #9C27B0;
  --bs-success-rgb: 156, 39, 176;
}

/* ========== 橙色主題 ========== */
body.theme-orange,
html.theme-orange {
  --primary-color: #FF9800;
  --primary-dark: #F57C00;
  --primary-hover: #FB8C00;
  --primary-light: #FFB74D;
  --primary-darker: #E65100;
  --primary-gradient: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
  
  --checkout-primary: #FF9800;
  --checkout-primary-dark: #F57C00;
  
  --bg-primary-lightest: #fff3e0;
  --bg-primary-light: #fff8f0;
  --bg-primary-soft: #fffaf5;
  
  --border-primary: #ffcc80;
  --border-primary-light: #ffe0b2;
  
  --text-brand: #FF9800;
  --text-brand-dark: #E65100;
  
  --shadow-primary: 0 4px 12px rgba(255, 152, 0, 0.3);
  --shadow-primary-lg: 0 6px 20px rgba(255, 152, 0, 0.4);
  --shadow-focus: 0 0 0 4px rgba(255, 152, 0, 0.1);
  --shadow-hover: 0 6px 16px rgba(255, 152, 0, 0.25);
  
  --spinner-color: #FF9800;
  
  --bs-success: #FF9800;
  --bs-success-rgb: 255, 152, 0;
}

/* ========== 紅色主題 ========== */
body.theme-red,
html.theme-red {
  --primary-color: #F44336;
  --primary-dark: #D32F2F;
  --primary-hover: #E53935;
  --primary-light: #EF5350;
  --primary-darker: #C62828;
  --primary-gradient: linear-gradient(135deg, #F44336 0%, #D32F2F 100%);
  
  --checkout-primary: #F44336;
  --checkout-primary-dark: #D32F2F;
  
  --bg-primary-lightest: #ffebee;
  --bg-primary-light: #fff5f5;
  --bg-primary-soft: #fffafa;
  
  --border-primary: #ef9a9a;
  --border-primary-light: #ffcdd2;
  
  --text-brand: #F44336;
  --text-brand-dark: #C62828;
  
  --shadow-primary: 0 4px 12px rgba(244, 67, 54, 0.3);
  --shadow-primary-lg: 0 6px 20px rgba(244, 67, 54, 0.4);
  --shadow-focus: 0 0 0 4px rgba(244, 67, 54, 0.1);
  --shadow-hover: 0 6px 16px rgba(244, 67, 54, 0.25);
  
  --spinner-color: #F44336;
  
  --bs-success: #F44336;
  --bs-success-rgb: 244, 67, 54;
}

/* ========== 青色主題 ========== */
body.theme-teal,
html.theme-teal {
  --primary-color: #009688;
  --primary-dark: #00796B;
  --primary-hover: #00897B;
  --primary-light: #4DB6AC;
  --primary-darker: #00695C;
  --primary-gradient: linear-gradient(135deg, #009688 0%, #00796B 100%);
  
  --checkout-primary: #009688;
  --checkout-primary-dark: #00796B;
  
  --bg-primary-lightest: #e0f2f1;
  --bg-primary-light: #f0f8f7;
  --bg-primary-soft: #f5faf9;
  
  --border-primary: #80cbc4;
  --border-primary-light: #b2dfdb;
  
  --text-brand: #009688;
  --text-brand-dark: #00695C;
  
  --shadow-primary: 0 4px 12px rgba(0, 150, 136, 0.3);
  --shadow-primary-lg: 0 6px 20px rgba(0, 150, 136, 0.4);
  --shadow-focus: 0 0 0 4px rgba(0, 150, 136, 0.1);
  --shadow-hover: 0 6px 16px rgba(0, 150, 136, 0.25);
  
  --spinner-color: #009688;
  
  --bs-success: #009688;
  --bs-success-rgb: 0, 150, 136;
}

/* ========== 深藍主題 ========== */
body.theme-indigo,
html.theme-indigo {
  --primary-color: #3F51B5;
  --primary-dark: #303F9F;
  --primary-hover: #3949AB;
  --primary-light: #5C6BC0;
  --primary-darker: #283593;
  --primary-gradient: linear-gradient(135deg, #3F51B5 0%, #303F9F 100%);
  
  --checkout-primary: #3F51B5;
  --checkout-primary-dark: #303F9F;
  
  --bg-primary-lightest: #e8eaf6;
  --bg-primary-light: #f0f1f8;
  --bg-primary-soft: #f5f5fa;
  
  --border-primary: #9fa8da;
  --border-primary-light: #c5cae9;
  
  --text-brand: #3F51B5;
  --text-brand-dark: #283593;
  
  --shadow-primary: 0 4px 12px rgba(63, 81, 181, 0.3);
  --shadow-primary-lg: 0 6px 20px rgba(63, 81, 181, 0.4);
  --shadow-focus: 0 0 0 4px rgba(63, 81, 181, 0.1);
  --shadow-hover: 0 6px 16px rgba(63, 81, 181, 0.25);
  
  --spinner-color: #3F51B5;
  
  --bs-success: #3F51B5;
  --bs-success-rgb: 63, 81, 181;
}


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