/* ===================================================================
   TisiShop 莫蘭迪粉主題 - 全站色彩系統
   ================================================================ */

:root {
  /* 莫蘭迪粉色系變數 */
  --morandi-pink: #E8C9BC;              /* 莫蘭迪粉 - 主色（按鈕、標籤、分頁點）*/
  --morandi-pink-dark: #D4B1A3;         /* 深莫蘭迪粉 - Hover 狀態 */
  --morandi-pink-deep: #C19A8B;         /* 更深莫蘭迪粉 - 文字用（確保對比度）*/
  --dark-bg: #373f50;                   /* 深色背景 - Header/Footer（專業感）*/
  --light-bg: #f6f9fc;                  /* 淺灰背景 - 頁面背景 */
  --card-bg: #FFFFFF;                   /* 白色卡片 */
  --border-light: #e1e7ec;              /* 淺灰邊框 */
  --text-primary: #373f50;              /* 深灰文字 */
  --text-secondary: #7d879c;            /* 中灰文字 */

  /* 間距系統（8px 基準）*/
  --space-1: 0.5rem;    /* 8px */
  --space-2: 1rem;      /* 16px */
  --space-3: 1.5rem;    /* 24px */
  --space-4: 2rem;      /* 32px */
  --space-5: 2.5rem;    /* 40px */

  /* 圓角系統 */
  --radius-sm: 8px;
  --radius-base: 12px;
  --radius-lg: 16px;

  /* 陰影系統（極簡）*/
  --shadow-sm: 0 2px 8px rgba(232, 201, 188, 0.12);
  --shadow-md: 0 4px 16px rgba(232, 201, 188, 0.15);
  --shadow-lg: 0 8px 24px rgba(232, 201, 188, 0.18);
}

/* ===================================================================
   覆寫 Bootstrap/Cartzilla 主題變數
   ================================================================ */

:root {
  --bs-primary: #E8C9BC;              /* 莫蘭迪粉取代珊瑚紅 */
  --bs-primary-rgb: 232, 201, 188;
  --bs-body-color: #373f50;           /* 深灰文字 */
  --bs-body-bg: #f6f9fc;              /* 淺灰背景 */
  --bs-link-color: #C19A8B;           /* 深莫蘭迪粉連結 */
  --bs-link-hover-color: #A0887E;     /* 更深色 hover */
  --bs-border-color: #e1e7ec;         /* 淺灰邊框 */
}

/* ===================================================================
   全局按鈕覆寫（扁平設計）
   ================================================================ */

.btn-primary {
  background: var(--morandi-pink-deep) !important;
  border-color: var(--morandi-pink-deep) !important;
  color: white !important;
  box-shadow: none !important; /* 移除陰影 */
  transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--morandi-pink-dark) !important;
  border-color: var(--morandi-pink-dark) !important;
  box-shadow: none !important; /* 移除陰影 */
  transform: translateY(-2px);
}

.btn-primary:active {
  background: var(--morandi-pink-deep) !important;
  border-color: var(--morandi-pink-deep) !important;
  transform: translateY(0);
}

.btn-outline-primary {
  color: var(--text-primary, #373f50) !important;
  border-color: var(--morandi-pink-deep) !important;
  background: transparent !important;
  border-width: 2px;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--morandi-pink-deep) !important;
  border-color: var(--morandi-pink-deep) !important;
  color: white !important;
}

/* ===================================================================
   連結樣式
   ================================================================ */

a {
  color: var(--morandi-pink-deep);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--morandi-pink-dark);
}

/* ===================================================================
   Badge 徽章
   ================================================================ */

.badge-primary {
  background-color: var(--morandi-pink) !important;
  color: white !important;
}

.badge.bg-primary {
  background-color: var(--morandi-pink) !important;
}

/* ===================================================================
   表單元素
   ================================================================ */

/* 選中狀態（扁平設計）*/
.form-check-input:checked {
  background-color: var(--morandi-pink) !important;
  border-color: var(--morandi-pink) !important;
  box-shadow: none !important;
}

.form-check-input:focus {
  border-color: var(--morandi-pink) !important;
  box-shadow: 0 0 0 0.2rem rgba(232, 201, 188, 0.25) !important;
}

/* ===================================================================
   分頁器
   ================================================================ */

.page-link {
  color: var(--morandi-pink-deep) !important;
}

.page-link:hover {
  color: var(--morandi-pink-dark) !important;
  background-color: rgba(232, 201, 188, 0.1) !important;
}

.page-item.active .page-link {
  background-color: var(--morandi-pink) !important;
  border-color: var(--morandi-pink) !important;
  color: white !important;
  box-shadow: none !important;
}

/* ===================================================================
   進度條
   ================================================================ */

.progress-bar {
  background-color: var(--morandi-pink) !important;
}

/* ===================================================================
   Alert 提示框
   ================================================================ */

.alert-primary {
  background-color: rgba(232, 201, 188, 0.1) !important;
  border-color: var(--morandi-pink) !important;
  color: var(--morandi-pink-deep) !important;
}

/* ===================================================================
   Nav Tabs / Pills
   ================================================================ */

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--morandi-pink) !important;
}

.nav-tabs .nav-link.active {
  color: var(--morandi-pink-deep) !important;
  border-bottom-color: var(--morandi-pink) !important;
}

/* ===================================================================
   Dropdown
   ================================================================ */

.dropdown-item:active,
.dropdown-item.active {
  background-color: var(--morandi-pink) !important;
}

/* ===================================================================
   Modal
   ================================================================ */

.modal-header {
  border-bottom-color: var(--border-light);
}

.modal-footer {
  border-top-color: var(--border-light);
}

/* ===================================================================
   Cartzilla 特定元件覆寫
   ================================================================ */

/* 商品卡片 hover */
.card-product:hover {
  border-color: var(--morandi-pink) !important;
}

/* 價格文字 */
.text-accent,
.product-price {
  color: var(--morandi-pink-deep) !important;
}

/* Icon 強調色 */
.text-primary,
i.text-primary {
  color: var(--morandi-pink-deep) !important;
}

/* ===================================================================
   購物車相關
   ================================================================ */

.cart-item-product-price {
  color: var(--morandi-pink-deep) !important;
  font-weight: 600;
}

/* ===================================================================
   響應式設計
   ================================================================ */

@media (max-width: 768px) {
  :root {
    --space-1: 0.375rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
  }
}