/* custom-theme.css */

/*
   美容行業主題配色 - 更暗深、奢華優雅 (基於您提供的圖片顏色深化)
   確保此文件在 Bootstrap 的 CSS 文件之後引入
*/

:root {
  /* ==================================================================== */
  /* 主要品牌顏色 (Theme Colors) - 由原圖顏色深化而來 */
  /* ==================================================================== */
  --bs-primary: #A16A79; /* 原 #E098AE 的更深、更沉穩的玫瑰紅 */
  --bs-primary-rgb: 161, 106, 121;

  --bs-secondary: #C78659; /* 原 #FFD0A6 的更深、更濃郁的焦糖/琥珀色 */
  --bs-secondary-rgb: 199, 134, 89;

  /* ==================================================================== */
  /* 狀態顏色 (Semantic Colors) - 調整為深沉、低飽和度暖調 */
  /* ==================================================================== */
  --bs-success: #6E9B71; /* 深沉的森林綠 */
  --bs-success-rgb: 110, 155, 113;

  --bs-info: #7CA1B9; /* 寧靜的深灰藍 */
  --bs-info-rgb: 124, 161, 185;

  --bs-warning: #B3996A; /* 柔和的深琥珀黃 */
  --bs-warning-rgb: 179, 153, 106;

  --bs-danger: #AA6B7A; /* 柔和的深玫瑰紅 */
  --bs-danger-rgb: 170, 107, 122;

  /* ==================================================================== */
  /* 淺色與深色 (Light & Dark) - 適應整體深色主題 */
  /* ==================================================================== */
  --bs-light: #5A5255; /* 用於深色主題中「較淺」的背景，如卡片、模態框背景 */
  --bs-light-rgb: 90, 82, 85;

  --bs-dark: #3E383A; /* 用於深色導航欄、頁腳等更深的區塊 */
  --bs-dark-rgb: 62, 56, 58;

  /* ==================================================================== */
  /* 中性色 / 灰階 (Neutral Colors / Grayscale) - 全面暖調深色 */
  /* ==================================================================== */
  --bs-white: #F8F5F2; /* 淺乳白色，常用於深色背景上的文字 */
  --bs-white-rgb: 248, 245, 242;

  --bs-black: #1E1A1B; /* 最深的暖黑色 */
  --bs-black-rgb: 30, 26, 27;

  --bs-gray-100: #EBE5E0; /* 非常淺的暖灰，用於最淺的文字或裝飾 */
  --bs-gray-200: #D8D2CB;
  --bs-gray-300: #B9B4AF; /* 較淺的暖灰，用於次要資訊、較亮的邊框 */
  --bs-gray-400: #9B9592;
  --bs-gray-500: #7E7875;
  --bs-gray-600: #645F5D;
  --bs-gray-700: #4B4645;
  --bs-gray-800: #353130; /* 用於較深的文字或深色背景上的深色文字 */
  --bs-gray-900: #231F1E; /* 用於背景上的深色細節 */

  /* ==================================================================== */
  /* 核心文字與背景色 */
  /* ==================================================================== */
  --bs-body-bg: #322C2D; /* 主要頁面背景色，深灰棕 */
  --bs-body-bg-rgb: 50, 44, 45;

  --bs-body-color: var(--bs-gray-100); /* 主要文字顏色，淺乳白色 */
  --bs-body-color-rgb: 235, 229, 224;

  /* ==================================================================== */
  /* 連結顏色 */
  /* ==================================================================== */
  --bs-link-color: var(--bs-primary); /* 連結使用主色 */
  --bs-link-hover-color: #C07C92; /* 主色 hover 時略微變亮 */
  --bs-link-active-color: #8C5C68; /* 更深的主色 */
  --bs-link-decoration: none;

  /* ==================================================================== */
  /* 邊框顏色 */
  /* ==================================================================== */
  --bs-border-color: var(--bs-gray-600); /* 邊框顏色，深色主題下通常用中等灰 */
  --bs-border-color-rgb: 100, 95, 93;

  /* ==================================================================== */
  /* 元件細節調整，以增強奢華和質感 */
  /* ==================================================================== */
  --bs-border-radius: 0.75rem; /* 增加邊角圓潤度，更柔和高級 */
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 1rem;

  /* 表單焦點外框顏色，使其更協調 */
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .4); /* 使用主色的半透明版本，更顯眼 */
  --bs-focus-ring-width: 0.3rem; /* 稍微粗一點的焦點環 */

  /* 卡片陰影更明顯，但仍然柔和 */
  --bs-card-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12); /* 更明顯的陰影 */

  /* 提示框背景色 (Toast) */
  --bs-toast-background-color: rgba(var(--bs-dark-rgb), 0.9);

  /* 麵包屑分隔符顏色 */
  --bs-breadcrumb-divider-color: var(--bs-gray-400);

  /* 調整狀態變體顏色，確保在深色背景下可見度 */
  /* Bootstrap 5.3+ 新增的 subtle 和 emphasis 變體 */
  /* 這些通常由 Sass 自動生成，但如果需要直接覆寫 CSS 變數，則需手動指定 */
  --bs-primary-bg-subtle: rgba(var(--bs-primary-rgb), 0.15); /* 淺色主題下是淺色背景，深色主題下是深色背景 */
  --bs-primary-border-subtle: rgba(var(--bs-primary-rgb), 0.3);
  --bs-primary-text-emphasis: var(--bs-primary); /* 在深色背景上，強調文本直接用主色 */

  --bs-secondary-bg-subtle: rgba(var(--bs-secondary-rgb), 0.15);
  --bs-secondary-border-subtle: rgba(var(--bs-secondary-rgb), 0.3);
  --bs-secondary-text-emphasis: var(--bs-secondary);

  /* 狀態色變體也需要調整，使其在深色背景下清晰 */
  --bs-success-bg-subtle: rgba(var(--bs-success-rgb), 0.15);
  --bs-success-border-subtle: rgba(var(--bs-success-rgb), 0.3);
  --bs-success-text-emphasis: var(--bs-success); /* 或更亮的綠色 */

  /* 警示框文字顏色確保對比 */
  .alert {
    color: var(--bs-body-color); /* 警示框文字使用主要文字色 */
  }
  .alert-success {
    background-color: var(--bs-success);
    color: var(--bs-white); /* 成功警示文字為白色 */
    border-color: var(--bs-success);
  }
  .alert-info {
    background-color: var(--bs-info);
    color: var(--bs-white); /* 資訊警示文字為白色 */
    border-color: var(--bs-info);
  }
  .alert-warning {
    background-color: var(--bs-warning);
    color: var(--bs-white); /* 警告警示文字為白色或深色，取決於警告背景的亮度 */
    border-color: var(--bs-warning);
  }
  .alert-danger {
    background-color: var(--bs-danger);
    color: var(--bs-white); /* 危險警示文字為白色 */
    border-color: var(--bs-danger);
  }

  /* 特定元件的背景和文字調整 */
  /* Navbar */
  .navbar-light { /* 如果仍使用 navbar-light 類，則背景是 light，文字是 dark */
    background-color: var(--bs-light) !important;
    color: var(--bs-body-color) !important; /* navbar 文字是淺色 */
  }
  .navbar-light .navbar-brand,
  .navbar-light .nav-link {
    color: var(--bs-primary) !important; /* 品牌和連結使用主色，顯眼 */
  }
  .navbar-dark { /* 通常推薦在深色主題下使用 navbar-dark */
    background-color: var(--bs-dark) !important;
    color: var(--bs-body-color) !important;
  }
  .navbar-dark .navbar-brand,
  .navbar-dark .nav-link {
    color: var(--bs-white) !important;
  }


  /* 卡片背景 */
  .card {
    background-color: var(--bs-light); /* 卡片背景使用比body-bg淺一點的顏色 */
    border-color: var(--bs-border-color); /* 邊框使用您定義的邊框色 */
  }

  /* 按鈕文字顏色調整，確保清晰 */
  .btn-primary {
    color: var(--bs-white); /* 主色按鈕上的文字使用白色 */
  }
  .btn-primary:hover {
    background-color: #8C5C68; /* 主色hover時略微加深 */
    border-color: #8C5C68;
  }
  .btn-secondary {
    color: var(--bs-white); /* 次要按鈕文字也用白色 */
  }
  .btn-secondary:hover {
    background-color: #A36B42; /* 次要色hover時略微加深 */
    border-color: #A36B42;
  }

  /* 額外自定義類別，使用圖片中的淺色作為高亮點 */
  /* 原 #FCE9DA 可以作為最淺的暖色背景 */
  .bg-subtle-cream {
      background-color: #FCE9DA !important;
      color: var(--bs-dark); /* 在此淺色背景上使用深色文字 */
  }
  /* 原 #FFCECB 可以作為柔和的粉色高亮 */
  .bg-subtle-pink {
      background-color: #FFCECB !important;
      color: var(--bs-dark);
  }
}

/* 考慮在 HTML 中使用 data-bs-theme="dark" 屬性來觸發 Bootstrap 的黑暗模式變數。
   如果這樣做，您可以定義 :root[data-bs-theme="dark"] { ... } 來覆寫。
   但由於您的主題本身就是「更暗深」，所以直接覆寫 :root 即可。
*/

/* 主題色強制覆蓋 Bootstrap 標籤顏色 */
.bg-primary { background-color: var(--bs-primary) !important; }
.bg-danger { background-color: var(--bs-danger) !important; }
.bg-success { background-color: var(--bs-success) !important; }
.bg-info { background-color: var(--bs-info) !important; }
.bg-warning { background-color: var(--bs-warning) !important; color: #333 !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }