/* ═══════════════════════════════════════════════════════════════
   CARTIER DESIGN SYSTEM v1.0  ·  2026-09-29
   呆 · Kelly Atelier 統一配色（白 × 金棕 + 寶石點綴）
   ═══════════════════════════════════════════════════════════════
   主色（品牌）  : 金棕 / 深棕
   功能色（數據）: 深紅 / 深綠 / 深藍 / 金黃  ← 低飽和寶石色
   鐵律           : 🚫 冇任何高飽和紅（#C8102E / #A60C30 / #FF0000）
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── 基礎 ── */
  --ct-bg:          #FAFAF7;   /* 頁面底（暖白） */
  --ct-surface:     #FFFFFF;   /* 卡片 / 內容區 */
  --ct-surface-alt: #F5F3EF;   /* 次級區塊 */

  /* ── 主色（品牌）── */
  --ct-gold:        #B8956A;   /* Cartier 金棕：線 / 標題 / hover */
  --ct-gold-deep:   #8B7355;   /* 深金棕：按鈕底 / 強調 */
  --ct-gold-light:  #D4C4B0;   /* 淡金：淡背景 */

  /* ── 文字 ── */
  --ct-ink:         #1A1A1A;   /* 主文字 */
  --ct-ink-2:       #4A4A4A;   /* 次文字 */
  --ct-ink-muted:   #8A8A8A;   /* 灰文字 / 說明 */

  /* ── 線 / 邊框 ── */
  --ct-line:        #E5E0D8;   /* 米白分隔線 */
  --ct-line-strong: #D8D2C6;   /* 較深邊框 */

  /* ── 🎨 4 寶石點綴色（只俾數據用，唔做裝飾）── */
  --ct-danger:      #7B1E1E;   /* 🔴 S 級客 / 危險警示 */
  --ct-success:     #1E4620;   /* 🟢 Ready / 已同步 / 完成 */
  --ct-info:        #1A365D;   /* 🔵 進行中 / 資訊 */
  --ct-warn:        #C9A961;   /* 🟡 A 級 / 重要 / 高亮 */

  /* ── 相容舊變數名（向後兼容）── */
  --gold:      var(--ct-gold);
  --gold-deep: var(--ct-gold-deep);
  --line:      var(--ct-line);
  --cream:     var(--ct-bg);
  --ink:       var(--ct-ink);
  --gray:      var(--ct-ink-muted);
  --red:       var(--ct-danger);

  /* ── 字型 ── */
  --ct-serif: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  --ct-sans:  -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei', sans-serif;

  /* ── 間距 ── */
  --ct-radius: 2px;
  --ct-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* ═══ 基礎元素 ═══ */
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ct-bg) !important;
  color: var(--ct-ink) !important;
  font-family: var(--ct-sans);
  margin: 0;
  line-height: 1.6;
}

h1, h2, h3, .ct-title {
  font-family: var(--ct-serif);
  color: var(--ct-ink);
  font-weight: 400;
  letter-spacing: 2px;
}

h1 { font-size: 22pt; letter-spacing: 5px; text-transform: uppercase; }
h2 { font-size: 16pt; letter-spacing: 3px; }
h3 { font-size: 13pt; letter-spacing: 2px; }

a { color: var(--ct-gold-deep); text-decoration: none; }
a:hover { color: var(--ct-gold); }

/* ═══ 分隔線 ═══ */
hr, .ct-rule {
  border: 0;
  border-top: 1px solid var(--ct-line);
  margin: 20px 0;
}

/* ═══ 卡片 ═══ */
.ct-card {
  background: var(--ct-surface);
  border: 1px solid var(--ct-line);
  border-radius: var(--ct-radius);
  padding: 20px;
  box-shadow: var(--ct-shadow);
}

/* ═══ 按鈕 ═══ */
.ct-btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--ct-surface);
  color: var(--ct-ink);
  border: 1px solid var(--ct-gold);
  border-radius: var(--ct-radius);
  font-size: 10pt;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .2s ease;
  font-family: inherit;
}
.ct-btn:hover { background: var(--ct-bg); border-color: var(--ct-gold-deep); }
.ct-btn--solid { background: var(--ct-gold-deep); color: #fff; border-color: var(--ct-gold-deep); }
.ct-btn--solid:hover { background: var(--ct-gold); border-color: var(--ct-gold); }
.ct-btn--danger { border-color: var(--ct-danger); color: var(--ct-danger); }

/* ═══ 狀態標籤（4 寶石色）═══ */
.ct-tag { display:inline-block; padding:2px 9px; border-radius:20px; font-size:8.5pt; letter-spacing:.5px; }
.ct-tag--s      { background:#F5E8E8; color:var(--ct-danger);  border:1px solid #E0CCCC; }
.ct-tag--a      { background:#FAF3E0; color:#8A6B1F;          border:1px solid #EBDCC0; }
.ct-tag--b      { background:#EEF2F7; color:var(--ct-info);    border:1px solid #D6DEE8; }
.ct-tag--c      { background:#F0F0EE; color:var(--ct-ink-muted); border:1px solid #E0E0DC; }
.ct-tag--ready  { background:#E9F0E9; color:var(--ct-success);  border:1px solid #D2E0D2; }
.ct-tag--wip    { background:#EEF2F7; color:var(--ct-info);     border:1px solid #D6DEE8; }
.ct-tag--soon   { background:#F0F0EE; color:var(--ct-ink-muted); border:1px solid #E0E0DC; }

/* ═══ Header（🚫 冇紅色漸層）═══ */
.ct-header {
  background: var(--ct-surface);
  border-bottom: 1px solid var(--ct-gold);
  color: var(--ct-ink);
  padding: 14px 20px;
}

/* ═══ Nav tab（🚫 underline 用金棕唔用紅）═══ */
.ct-tab { border-bottom: 2px solid transparent; }
.ct-tab.on, .ct-tab[aria-selected="true"] { border-bottom-color: var(--ct-gold); color: var(--ct-ink); }

/* ═══ 表格 ═══ */
table.ct-table { width:100%; border-collapse:collapse; font-size:10pt; }
table.ct-table th {
  background: var(--ct-surface-alt);
  color: var(--ct-ink-2);
  font-weight: 400;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ct-gold);
  letter-spacing: 1px;
  font-size: 9pt;
  text-transform: uppercase;
}
table.ct-table td { padding: 9px 12px; border-bottom: 1px solid var(--ct-line); }
table.ct-table tr:hover td { background: var(--ct-bg); }

/* ═══ 輸入框 ═══ */
input, select, textarea {
  border: 1px solid var(--ct-line-strong);
  border-radius: var(--ct-radius);
  padding: 9px 12px;
  font-family: inherit;
  font-size: 10.5pt;
  color: var(--ct-ink);
  background: var(--ct-surface);
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--ct-gold); }

/* ═══ 🚫 紅色清除層（擊殺舊高飽和紅）═══ */
.ct-kill-red, [style*="#C8102E"], [style*="#A60C30"], [style*="#8B0A26"], [style*="#8B0A1F"] {
  /* 由 JS 或後續規則處理 */
}