/* ================================================================
   Tendergo Theme System — Phase A
   ================================================================
   所有視覺外觀(顏色、圓角、陰影、邊框、字型)統一由 CSS Custom Properties 控制。
   Tailwind 只負責 layout / spacing / responsive / typography size。
   ================================================================ */

/* ===== 1. 預設變數:Tendergo Clean ===== */
:root {
  /* ─── 主要色 ─── */
  --color-primary:        #4f46e5;
  --color-primary-hover:  #4338ca;
  --color-on-primary:     #ffffff;

  --color-accent:         #0ea5e9;
  --color-accent-hover:   #0284c7;
  --color-on-accent:      #ffffff;

  --color-danger:         #dc2626;
  --color-danger-hover:   #b91c1c;
  --color-on-danger:      #ffffff;

  /* ─── Badge 語義色 ─── */
  --color-success-bg:     #ecfdf5;
  --color-success-text:   #047857;
  --color-warning-bg:     #fffbeb;
  --color-warning-text:   #b45309;
  --color-danger-bg:      #fef2f2;
  --color-danger-text:    #b91c1c;
  --color-neutral-bg:     #f1f5f9;
  --color-neutral-text:   #475569;
  --color-info-bg:        #f0f9ff;
  --color-info-text:      #0369a1;
  --color-accent-bg:      #eef2ff;
  --color-accent-text:    #4338ca;

  /* ─── 背景 / 表面 ─── */
  --bg-page:              #f8fafc;
  --bg-card:              #ffffff;
  --bg-input:             #f8fafc;
  --bg-input-focus:       #ffffff;
  --bg-nav:               #ffffff;
  --bg-table-header:      #f8fafc;
  --bg-hover:             #f1f5f9;

  /* ─── 文字 ─── */
  --text-heading:         #0f172a;
  --text-body:            #1e293b;
  --text-muted:           #6b7280;  /* gray-500:中性灰,不帶藍 */
  --text-faint:           #9ca3af;  /* gray-400:暖灰,用於 field label */
  --text-section:         #4b5563;  /* gray-600:section header 用,比 faint 深 */

  /* ─── 邊框 ─── */
  --border-default:       #e2e8f0;
  --border-hover:         #a5b4fc;
  --border-danger:        #fecaca;
  --border-input:         #cbd5e1;

  /* ─── 圓角 ─── */
  --radius-sm:            0.375rem;
  --radius-md:            0.5rem;
  --radius-lg:            1rem;
  --radius-full:          9999px;

  /* ─── 陰影 ─── */
  --shadow-sm:            0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:            0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* ─── 字型 ─── */
  --font-body:            -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-heading:         var(--font-body);
  --font-mono:            ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ─── 動畫 ─── */
  --transition-fast:      150ms ease;
  --transition-normal:    250ms ease;
}

/* ===== 2. 語義化元件 ===== */

/* --- Page --- */
.tg-page {
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  min-height: 100vh;
}

/* --- Nav --- */
.tg-nav {
  background: var(--bg-nav);
  border-bottom: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
}
.tg-nav-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tg-nav-item {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--text-body);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.tg-nav-item:hover {
  background: var(--bg-hover);
}
.tg-nav-item-active {
  background: var(--color-accent-bg);
  color: var(--color-accent-text);
  font-weight: 500;
}

/* --- Card --- */
.tg-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
}
.tg-card-hover {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  display: block;
  text-decoration: none;
  color: inherit;
}
.tg-card-hover:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

/* --- Button --- */
.tg-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.tg-btn-primary:hover { background: var(--color-primary-hover); }

.tg-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-body);
  border-radius: var(--radius-md);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border-default);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.tg-btn-secondary:hover { background: var(--bg-hover); }

.tg-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-danger);
  border-radius: var(--radius-md);
  padding: 0.375rem 0.75rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.tg-btn-danger:hover { background: var(--color-danger-bg); }

.tg-btn-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border-radius: var(--radius-md);
  padding: 0.375rem 0.75rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.tg-btn-info:hover { background: #e0f2fe; }

.tg-btn-warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-radius: var(--radius-md);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.tg-btn-warning:hover { background: #fde68a; }

.tg-btn-danger-block {
  display: block;
  width: 100%;
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  font-weight: 500;
  font-size: 0.75rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.tg-btn-danger-block:hover { background: var(--border-danger); }

/* --- Badge --- */
.tg-badge-success {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-success-bg);
  color: var(--color-success-text);
  font-weight: 500;
}
.tg-badge-warning {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.tg-badge-danger {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}
.tg-badge-neutral {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-neutral-bg);
  color: var(--color-neutral-text);
}
.tg-badge-info {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-info-bg);
  color: var(--color-info-text);
}
.tg-badge-accent {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-bg);
  color: var(--color-accent-text);
  font-weight: 500;
}

/* --- Form --- */
.tg-input {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--text-body);
  padding: 0.5rem 0.75rem;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.tg-input:focus {
  background: var(--bg-input-focus);
  border-color: var(--color-primary);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgb(79 70 229 / 0.15);
}
.tg-select {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--text-body);
}
.tg-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-heading);
}
.tg-help {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* --- Table --- */
.tg-table {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.tg-table-header {
  background: var(--bg-table-header);
  border-bottom: 1px solid var(--border-default);
}
.tg-table-header th {
  padding: 0.75rem 1rem;
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
}
.tg-table-header th[data-align="right"] { text-align: right; }
.tg-table-header th[data-align="center"] { text-align: center; }
.tg-table-row:hover {
  background: var(--bg-hover);
}

/* --- Text --- */
.tg-text-heading {
  font-family: var(--font-heading);
  color: var(--text-heading);
}
.tg-text-body    { color: var(--text-body); }
.tg-text-muted   { color: var(--text-muted); }
.tg-text-faint   { color: var(--text-faint); }
.tg-text-section { color: var(--text-section); }
.tg-text-accent  { color: var(--color-primary); }
.tg-text-danger  { color: var(--color-danger-text); }

/* Section header inside cards */
.tg-section-title {
  color: var(--text-section);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-default);
}

/* --- Link --- */
.tg-link {
  color: var(--color-primary);
  text-decoration: none;
}
.tg-link:hover {
  text-decoration: underline;
}

/* --- Divider --- */
.tg-divider {
  border-top: 1px solid var(--border-default);
}

/* --- Toast --- */
.tg-toast-success {
  padding: 0.75rem;
  border-radius: var(--radius-md);
  background: var(--color-success-bg);
  color: var(--color-success-text);
  font-size: 0.875rem;
}

/* --- Footer --- */
.tg-footer {
  color: var(--text-faint);
  font-size: 0.875rem;
}

/* --- Attachment blocks --- */
.tg-attachment-ok {
  background: var(--color-success-bg);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: filter var(--transition-fast);
}
.tg-attachment-ok:hover { filter: brightness(0.97); }

.tg-attachment-pending {
  background: var(--color-warning-bg);
  border-radius: var(--radius-md);
  padding: 0.75rem;
}

.tg-attachment-fail {
  background: var(--color-danger-bg);
  border-radius: var(--radius-md);
  padding: 0.75rem;
}

.tg-attachment-accent {
  background: var(--color-accent-bg);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: filter var(--transition-fast);
}
.tg-attachment-accent:hover { filter: brightness(0.97); }

.tg-attachment-none {
  font-size: 0.75rem;
  color: var(--text-faint);
  padding: 0 0.25rem;
}

/* ================================================================
   THEME: Obsidian 黑曜(暗色夜間模式)
   ================================================================
   靈感:深夜工作的專業感 — 不是冷硬的純黑,而是帶有深邃藍調的暗色。
   配色:深海軍藍底、暖金主色、柔白文字。
   字型:Inter(幾何 sans)— 高可讀性,適合暗色背景。
   設計語言:低對比邊框、發光般的主色、充足的呼吸空間。
   ================================================================ */
[data-theme="obsidian"] {
  /* ─── 主要色(暖金 — 暗底上的奢華點綴) ─── */
  --color-primary:        #d4a574;
  --color-primary-hover:  #c4925e;
  --color-on-primary:     #0c1222;

  --color-accent:         #7eb8c9;  /* 霧藍 */
  --color-accent-hover:   #6aa4b5;
  --color-on-accent:      #0c1222;

  --color-danger:         #e87070;
  --color-danger-hover:   #d45a5a;
  --color-on-danger:      #0c1222;

  /* ─── Badge 語義色(暗底適配,低飽和發光感) ─── */
  --color-success-bg:     #132a1e;
  --color-success-text:   #6fcf97;
  --color-warning-bg:     #2a2210;
  --color-warning-text:   #e8c468;
  --color-danger-bg:      #2a1215;
  --color-danger-text:    #f08080;
  --color-neutral-bg:     #1e2433;
  --color-neutral-text:   #8892a4;
  --color-info-bg:        #0f1f2e;
  --color-info-text:      #7eb8c9;
  --color-accent-bg:      #1a1810;
  --color-accent-text:    #d4a574;

  /* ─── 背景(深海軍藍,有層次) ─── */
  --bg-page:              #0c1222;
  --bg-card:              #162032;
  --bg-input:             #1a2538;
  --bg-input-focus:       #1e2d45;
  --bg-nav:               #101828;
  --bg-table-header:      #131d30;
  --bg-hover:             #1e2d45;

  /* ─── 文字(暖白色階,不刺眼) ─── */
  --text-heading:         #f0ede8;
  --text-body:            #c8c4be;
  --text-muted:           #8892a4;
  --text-faint:           #566178;
  --text-section:         #97a0b2;

  /* ─── 邊框(極暗,若隱若現) ─── */
  --border-default:       #1e2d45;
  --border-hover:         #d4a574;  /* hover 時金色邊 */
  --border-danger:        #3a1a1e;
  --border-input:         #283850;

  /* ─── 圓角(同 Clean) ─── */
  --radius-sm:            0.375rem;
  --radius-md:            0.5rem;
  --radius-lg:            1rem;

  /* ─── 陰影(深色環境用微光而非投影) ─── */
  --shadow-sm:            0 1px 3px 0 rgb(0 0 0 / 0.3);
  --shadow-md:            0 4px 12px -2px rgb(0 0 0 / 0.4);

  /* ─── 字型 ─── */
  --font-heading:         'Inter', -apple-system, sans-serif;
  --font-body:            'Inter', -apple-system, 'PingFang TC', sans-serif;

  /* ─── 動畫 ─── */
  --transition-fast:      150ms ease;
  --transition-normal:    250ms ease;
}


/* --- Tab --- */
.tg-tab {
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.tg-tab:hover {
  color: var(--text-body);
  background: var(--bg-hover);
}
.tg-tab-active {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  background: transparent;
  cursor: default;
}

/* --- Run toast (floating notification) --- */
.tg-toast-run {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px -4px rgb(0 0 0 / 0.12), 0 2px 8px -2px rgb(0 0 0 / 0.08);
  padding: 1rem 1.25rem;
  min-width: 300px;
  max-width: 420px;
  cursor: pointer;
}

#toast-area {
  position: fixed;
  top: 5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --- Checkbox (batch toolbar) --- */
.tg-checkbox {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-input);
  background: var(--bg-card);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  position: relative;
  transition: all var(--transition-fast);
}
.tg-checkbox:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.tg-checkbox:checked::after {
  content: '✓';
  color: var(--color-on-primary);
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* --- Card with select zone (right strip) --- */
.tg-card-selectable {
  display: flex;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.tg-card-selectable:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}
.tg-card-content {
  flex: 1;
  min-width: 0;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: inherit;
  display: block;
  /* 允許文字選取(複製),禁止瀏覽器把 <a> 當成可拖曳連結 */
  user-select: text;
  -webkit-user-drag: none;
}
.tg-select-zone {
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-left: 1px solid var(--border-default);
  transition: background var(--transition-fast);
  flex-shrink: 0;
  opacity: 0;
}
.tg-card-selectable:hover .tg-select-zone,
.has-selection .tg-select-zone {
  opacity: 1;
}
.tg-select-zone:hover {
  background: var(--bg-hover);
}
.tg-checkbox-zone {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-input);
  background: var(--bg-card);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  transition: all var(--transition-fast);
}
.tg-checkbox-zone:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.tg-checkbox-zone:checked::after {
  content: '✓';
  color: var(--color-on-primary);
  font-size: 13px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* --- Selected card highlight --- */
.tg-card-selected {
  border-color: var(--color-primary) !important;
  background: var(--color-accent-bg);
}
.tg-card-selected .tg-select-zone {
  opacity: 1;
  background: var(--color-accent-bg);
}

/* --- Batch toolbar --- */
.tg-batch-bar {
  position: sticky;
  top: 4.5rem;
  z-index: 50;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.1);
  padding: 0.75rem 1.25rem;
}

/* --- Dialog overlay --- */
.tg-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tg-dialog {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px -8px rgb(0 0 0 / 0.2);
  padding: 1.5rem;
  max-width: 440px;
  width: 90%;
}

/* --- Misc --- */
.num { font-variant-numeric: tabular-nums; }
.tg-mono { font-family: var(--font-mono); }


/* ================================================================
   THEME: Morandi 莫蘭迪溫雅
   ================================================================
   靈感:Giorgio Morandi 的靜物畫 — 柔和、沈靜、不張揚的美。
   配色:亞麻米、奶茶灰棕、霧玫瑰、鼠尾綠,全是低飽和暖色。
   字型:Cormorant Garamond(heading)+ Noto Serif TC(body)= 古典知性。
   ================================================================ */
[data-theme="morandi"] {
  /* ─── 主要色 ─── */
  --color-primary:        #8b7e74;  /* 灰棕(莫蘭迪標誌色) */
  --color-primary-hover:  #766b62;
  --color-on-primary:     #fffdf9;

  --color-accent:         #a4917e;  /* 奶茶 */
  --color-accent-hover:   #917f6d;
  --color-on-accent:      #fffdf9;

  --color-danger:         #b5706b;  /* 霧玫瑰紅 */
  --color-danger-hover:   #9e5e59;
  --color-on-danger:      #fffdf9;

  /* ─── Badge 語義色(低飽和版) ─── */
  --color-success-bg:     #e8ede6;  /* 鼠尾草淡綠 */
  --color-success-text:   #5a6e56;
  --color-warning-bg:     #f0e8db;  /* 亞麻米 */
  --color-warning-text:   #8a7158;
  --color-danger-bg:      #f0e0de;  /* 霧粉 */
  --color-danger-text:    #8b5c58;
  --color-neutral-bg:     #e8e4df;  /* 暖灰 */
  --color-neutral-text:   #6b6560;
  --color-info-bg:        #dfe5e8;  /* 霧藍灰 */
  --color-info-text:      #556670;
  --color-accent-bg:      #ece6df;  /* 奶茶淡底 */
  --color-accent-text:    #6e5d4d;

  /* ─── 背景 / 表面 ─── */
  --bg-page:              #f6f1eb;  /* 亞麻紙 */
  --bg-card:              #fffdf9;  /* 奶白 */
  --bg-input:             #f4ede5;
  --bg-input-focus:       #fffdf9;
  --bg-nav:               #fffdf9;
  --bg-table-header:      #f0ebe4;
  --bg-hover:             #ede7e0;

  /* ─── 文字(暖棕系) ─── */
  --text-heading:         #3d3630;
  --text-body:            #4d453e;
  --text-muted:           #7a716a;
  --text-faint:           #a39a93;
  --text-section:         #635b54;

  /* ─── 邊框 ─── */
  --border-default:       #ddd5cb;
  --border-hover:         #b5a899;
  --border-danger:        #e0c6c3;
  --border-input:         #cec5ba;

  /* ─── 圓角(略大,更柔和) ─── */
  --radius-sm:            0.5rem;
  --radius-md:            0.625rem;
  --radius-lg:            1.25rem;

  /* ─── 陰影(極淡暖色) ─── */
  --shadow-sm:            0 1px 3px 0 rgb(139 126 116 / 0.06);
  --shadow-md:            0 4px 8px -2px rgb(139 126 116 / 0.1);

  /* ─── 字型 ─── */
  --font-heading:         'Cormorant Garamond', 'Noto Serif TC', serif;
  --font-body:            'Noto Serif TC', 'PingFang TC', serif;

  /* ─── 動畫(稍慢,更優雅) ─── */
  --transition-fast:      200ms ease;
  --transition-normal:    350ms ease;
}


/* ================================================================
   THEME: Redline Luxe 精品
   ================================================================
   靈感:Redline boutique 珠寶網站 — 白底、紅線點綴、金色奢華感。
   配色:純白背景、深紅主色、金色輔色、極深灰文字。
   字型:Montserrat(heading)— 幾何精準的現代無襯線。
   設計語言:極簡、高對比、大留白。
   ================================================================ */
[data-theme="redline"] {
  /* ─── 主要色 ─── */
  --color-primary:        #b91c3a;  /* Redline 深紅 */
  --color-primary-hover:  #9e1730;
  --color-on-primary:     #ffffff;

  --color-accent:         #c5a47e;  /* 香檳金 */
  --color-accent-hover:   #b08f6a;
  --color-on-accent:      #ffffff;

  --color-danger:         #c41e3a;  /* 純紅 */
  --color-danger-hover:   #a51830;
  --color-on-danger:      #ffffff;

  /* ─── Badge 語義色(高冷版) ─── */
  --color-success-bg:     #e8f0e8;
  --color-success-text:   #2d6a4f;
  --color-warning-bg:     #f7f0e6;
  --color-warning-text:   #92681e;
  --color-danger-bg:      #fce8ec;
  --color-danger-text:    #9e1730;
  --color-neutral-bg:     #f0f0f0;
  --color-neutral-text:   #555555;
  --color-info-bg:        #e8eef5;
  --color-info-text:      #2c5282;
  --color-accent-bg:      #faf5ef;  /* 金色淡底 */
  --color-accent-text:    #8b6914;

  /* ─── 背景 / 表面 ─── */
  --bg-page:              #ffffff;  /* 純白(精品標配) */
  --bg-card:              #ffffff;
  --bg-input:             #fafafa;
  --bg-input-focus:       #ffffff;
  --bg-nav:               #ffffff;
  --bg-table-header:      #fafafa;
  --bg-hover:             #f5f5f5;

  /* ─── 文字(高對比深灰黑) ─── */
  --text-heading:         #1a1a1a;
  --text-body:            #2d2d2d;
  --text-muted:           #777777;
  --text-faint:           #aaaaaa;
  --text-section:         #555555;

  /* ─── 邊框(極淡,精緻) ─── */
  --border-default:       #e8e8e8;
  --border-hover:         #c41e3a;  /* hover 時紅線 — Redline 標誌 */
  --border-danger:        #fadadd;
  --border-input:         #d5d5d5;

  /* ─── 圓角(小圓角,俐落) ─── */
  --radius-sm:            0.25rem;
  --radius-md:            0.375rem;
  --radius-lg:            0.625rem;

  /* ─── 陰影(極克制) ─── */
  --shadow-sm:            0 1px 2px 0 rgb(0 0 0 / 0.03);
  --shadow-md:            0 2px 8px -2px rgb(0 0 0 / 0.08);

  /* ─── 字型 ─── */
  --font-heading:         'Montserrat', -apple-system, sans-serif;
  --font-body:            'Montserrat', -apple-system, 'PingFang TC', sans-serif;

  /* ─── 動畫(快,俐落) ─── */
  --transition-fast:      120ms ease;
  --transition-normal:    200ms ease;
}