/* ============================================================
   styles_warmth_test.css — AetherClaw 暖色覆蓋
   使用方式：在 styles.css 之後載入本檔（index_color_test.html 已設定）
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. CSS 變數全面覆蓋：暗黑 → 暖橙象牙
   ───────────────────────────────────────────────────────────── */
:root {
  --primary:            #F97316;
  --primary-glow:       rgba(249, 115, 22, 0.30);
  --accent:             #EA580C;
  --accent-glow:        rgba(234, 88, 12, 0.25);
  --warning:            #F59E0B;
  --danger:             #EF4444;

  --bg:                 #FEF6EE;
  --bg-gradient:        linear-gradient(160deg, #FFFBF7 0%, #FEF3E8 40%, #FDE8CF 100%);

  --surface:            rgba(255, 255, 255, 0.82);
  --surface-border:     rgba(249, 115, 22, 0.15);
  --surface-glow:       rgba(249, 115, 22, 0.08);

  --text:               #1A1A1A;
  --text-muted:         #6B7280;
  --text-dark:          #1A1A1A;
}

/* ─────────────────────────────────────────────────────────────
   2. Body / 基礎背景
   ───────────────────────────────────────────────────────────── */
body {
  background-color: #FEF6EE !important;
  background-image: linear-gradient(160deg, #FFFBF7 0%, #FEF3E8 40%, #FDE8CF 100%) !important;
  color: #1A1A1A !important;
}

/* ─────────────────────────────────────────────────────────────
   3. 滾動條
   ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar-track { background: #FEF6EE; }
::-webkit-scrollbar-thumb { background: rgba(249, 115, 22, 0.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #F97316; }

/* ─────────────────────────────────────────────────────────────
   4. Ambient Glow 光暈（暖橙）
   ───────────────────────────────────────────────────────────── */
.ambient-glow.glow-1 {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.10) 0%, transparent 70%) !important;
}
.ambient-glow.glow-2 {
  background: radial-gradient(circle, rgba(251, 146, 60, 0.07) 0%, transparent 70%) !important;
}

/* ─────────────────────────────────────────────────────────────
   5. Top 公告列
   ───────────────────────────────────────────────────────────── */
.top-store-bar {
  background: linear-gradient(90deg, #EA580C 0%, #F97316 50%, #EA580C 100%) !important;
  color: #fff !important;
}
.top-store-bar a, .top-store-bar .store-link {
  color: #fff !important;
  border-color: rgba(255,255,255,0.40) !important;
}
.store-link.shopee:hover, .store-link.yahoo:hover, .store-link.ruten:hover {
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: 0 0 10px rgba(255,255,255,0.2) !important;
}

/* ─────────────────────────────────────────────────────────────
   6. Header 導覽列
   ───────────────────────────────────────────────────────────── */
.header {
  background: rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
}
.logo { color: #1A1A1A !important; }
.logo span > span { color: #F97316 !important; }
.logo-icon { color: #F97316 !important; text-shadow: 0 0 12px rgba(249,115,22,0.45) !important; }
.nav-link { color: #374151 !important; }
.nav-link:hover { color: #1A1A1A !important; background: rgba(0,0,0,0.04) !important; }
.nav-link.active { color: #F97316 !important; }
.nav-link.active::after, .nav-link::after { background: #F97316 !important; }
.menu-toggle { color: #374151 !important; }
.menu-toggle:hover { color: #F97316 !important; }
.btn.btn-primary.btn-sm, #btn-header-cta {
  background: linear-gradient(135deg, #F97316 0%, #FB923C 100%) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 2px 12px rgba(249,115,22,0.40) !important;
}

/* ─────────────────────────────────────────────────────────────
   7. 按鈕
   ───────────────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #F97316 0%, #FB923C 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(249,115,22,0.40) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #EA580C 0%, #F97316 100%) !important;
  box-shadow: 0 8px 24px rgba(249,115,22,0.55) !important;
}
.btn-outline, .btn-secondary {
  background: #fff !important;
  color: #1A1A1A !important;
  border: 1.5px solid #D1D5DB !important;
}
.btn-outline:hover, .btn-secondary:hover {
  border-color: #F97316 !important;
  color: #F97316 !important;
}

/* ─────────────────────────────────────────────────────────────
   8. 卡片 / 毛玻璃表面
   ───────────────────────────────────────────────────────────── */
.card, .plan-card, .feature-card, .glass-card,
[class*="card"]:not(.plan-badge) {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: #1A1A1A !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
.card:hover, .plan-card:hover, .feature-card:hover, .glass-card:hover {
  border-color: rgba(249,115,22,0.25) !important;
  box-shadow: 0 8px 28px rgba(249,115,22,0.12) !important;
}
.plan-badge {
  background: linear-gradient(135deg, #F97316, #FBBF24) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   9. 漸層文字（英雄區大標）
   ───────────────────────────────────────────────────────────── */
.gradient-text, .text-gradient {
  background: linear-gradient(135deg, #F97316 0%, #FB923C 60%, #FBBF24 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ─────────────────────────────────────────────────────────────
   10. Mobile nav
   ───────────────────────────────────────────────────────────── */
.nav.active, #main-nav.active {
  background: rgba(255,255,255,0.97) !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
}

/* ─────────────────────────────────────────────────────────────
   11. Section 文字顏色修正（避免淺色/白色文字消失在白背景）
   ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: #1A1A1A !important; }
p, span, li, td, th, label, strong { color: #374151 !important; }
strong { color: #1A1A1A !important; font-weight: 700 !important; }
.section-title, .section-subtitle { color: #1A1A1A !important; }
.section-desc { color: #6B7280 !important; }

/* 導覽列焦點外框移除 */
.nav-link:focus, .nav-link:active, a:focus, a:active {
  outline: none !important;
  box-shadow: none !important;
}

/* 針對定價卡片進行強制顏色覆蓋，避免 inherit 到原本暗色主題的白字 */
.pricing-plan-card, .pricing-plan-card * {
  color: #1A1A1A !important;
}
.pricing-plan-card h3 {
  color: #1A1A1A !important;
}
.pricing-plan-card .plan-sub,
.pricing-plan-card .price-unit,
.pricing-plan-card .plan-words p {
  color: #6B7280 !important;
}
.pricing-plan-card .plan-words strong {
  color: #EA580C !important; /* 限時特惠價改為深橙色強調 */
}
.pricing-plan-card .plan-price {
  color: #F97316 !important; /* 價格使用暖橙色 */
}
.pricing-plan-card .store-link {
  color: #fff !important; /* 賣場按鈕文字保持白色 */
}

/* 白色文字修正（原暗色主題下的白字在淺色背景不可見） */
[style*="color: #fff"],
[style*="color:white"],
[style*="color: white"],
[style*="color:#fff"],
[style*="color:#ffffff"],
[style*="color: #ffffff"] { color: #1A1A1A !important; }

/* ─────────────────────────────────────────────────────────────
   12. 終端機模擬視窗（保留暗色背景，確保綠字可見）
   ───────────────────────────────────────────────────────────── */
#tab-log {
  background: #0D0D0D !important;
  border: 1px solid rgba(249, 115, 22, 0.20) !important;
}
.terminal-area {
  background: #0D0D0D !important;
  color: #10b981 !important;          /* terminal green */
}
.term-line { color: #10b981 !important; }
.term-line.system { color: #F59E0B !important; }    /* amber */
.term-line.error  { color: #F87171 !important; }    /* red   */
.term-line.info   { color: #60A5FA !important; }    /* blue  */

/* 終端機外框標題列 */
[class*="tab-header"],
[class*="tab-bar"],
[class*="device-tab"] {
  background: rgba(30, 20, 10, 0.95) !important;
  color: #FEF3E2 !important;
  border-color: rgba(249, 115, 22, 0.20) !important;
}

/* ─────────────────────────────────────────────────────────────
   13. Chat 聊天視窗（LINE 風格）
   ───────────────────────────────────────────────────────────── */
/* 聊天視窗外框保留暖淺色 */
[class*="chat-window"],
[class*="chat-container"],
[class*="simulator"] {
  background: #F5F5F0 !important;
  border: 1px solid rgba(249,115,22,0.15) !important;
}
/* 聊天視窗頂部標題列 */
[class*="chat-header"] {
  background: #06c755 !important;  /* LINE green */
  color: #fff !important;
}
/* 使用者訊息氣泡 - LINE 綠（保持不變） */
.user-msg .chat-bubble {
  background: #06c755 !important;
  color: #fff !important;
}
/* Bot 訊息氣泡 - 白底深字 */
.bot-msg .chat-bubble {
  background: #fff !important;
  color: #1A1A1A !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
}
/* 聊天輸入列 */
.chat-input-bar {
  background: rgba(240, 240, 235, 0.95) !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
}
.chat-input-bar input {
  background: #fff !important;
  border: 1px solid #D1D5DB !important;
  color: #1A1A1A !important;
}

/* ─────────────────────────────────────────────────────────────
   14. Persona 選擇器（人格按鈕）
   ───────────────────────────────────────────────────────────── */
.persona-btn {
  background: rgba(249, 115, 22, 0.06) !important;
  border: 1px solid rgba(249, 115, 22, 0.18) !important;
  color: #6B7280 !important;
}
.persona-btn:hover {
  background: rgba(249, 115, 22, 0.12) !important;
  color: #1A1A1A !important;
  border-color: rgba(249, 115, 22, 0.35) !important;
}
.persona-btn.active {
  background: rgba(249, 115, 22, 0.15) !important;
  border-color: #F97316 !important;
  color: #C2410C !important;
  box-shadow: 0 2px 10px rgba(249, 115, 22, 0.20) !important;
}

/* ─────────────────────────────────────────────────────────────
   15. Device Status Overlay
   ───────────────────────────────────────────────────────────── */
.device-status-overlay {
  background: rgba(28, 17, 8, 0.70) !important;
  border: 1px solid rgba(249, 115, 22, 0.20) !important;
  color: #FEF3E2 !important;
}

/* ─────────────────────────────────────────────────────────────
   16. PCB / 電路板模擬（保留深色背景，視覺元素已有硬編碼顏色）
   ───────────────────────────────────────────────────────────── */
[class*="pcb-"],
[class*="board-"],
[class*="chip-"] {
  /* 電路板元素保留原始深色，不覆蓋 */
}
.silkscreen {
  color: rgba(180, 160, 130, 0.6) !important; /* 暗色板上的絲印改成暖色可見 */
}

/* ─────────────────────────────────────────────────────────────
   17. 狀態指示器文字 / 標籤顏色修正
   ───────────────────────────────────────────────────────────── */
/* 成功狀態 */
[class*="success"], [class*="green"]:not(.btn) { color: #059669 !important; }
/* 錯誤 / 危險 */
[class*="error"], [class*="danger"] { color: #DC2626 !important; }
/* 資訊 */
[class*="info"] { color: #2563EB !important; }
/* 警告 */
[class*="warn"] { color: #D97706 !important; }

/* ─────────────────────────────────────────────────────────────
   18. Input / Form
   ───────────────────────────────────────────────────────────── */
input, textarea, select {
  background: #fff !important;
  border-color: #D1D5DB !important;
  color: #1A1A1A !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: #9CA3AF !important; }

/* ─────────────────────────────────────────────────────────────
   19. Footer
   ───────────────────────────────────────────────────────────── */
footer, .footer {
  background: #1C1108 !important;
  color: rgba(254, 243, 232, 0.80) !important;
  border-top: 1px solid rgba(249,115,22,0.20) !important;
}
footer a, .footer a { color: rgba(254,243,232,0.55) !important; }
footer a:hover, .footer a:hover { color: #FB923C !important; }
footer p, .footer p,
footer span, .footer span,
footer h4, .footer h4,
.brand-subtitle {
  color: #FEF3E2 !important;
}
.brand-story {
  color: #C4A882 !important;
}


/* ─────────────────────────────────────────────────────────────
   20. Tab 切換列（功能頁標籤）
   ───────────────────────────────────────────────────────────── */
[class*="tab-btn"], [class*="tab-nav"] {
  color: #6B7280 !important;
  background: rgba(249, 115, 22, 0.05) !important;
  border-color: rgba(249, 115, 22, 0.15) !important;
}
[class*="tab-btn"].active,
[class*="tab-btn"]:hover {
  color: #F97316 !important;
  background: rgba(249, 115, 22, 0.12) !important;
  border-color: #F97316 !important;
}

/* ─────────────────────────────────────────────────────────────
   21. 商城賣場按鈕文字顏色修正
   ───────────────────────────────────────────────────────────── */
.store-link.shopee,
.store-link.yahoo,
.store-link.ruten {
  color: #1A1A1A !important;
  font-weight: 700 !important;
}

/* 懸停時保持原有高反差顏色（如蝦皮/雅虎懸停時為白字，露天為深藍字） */
.store-link.shopee:hover,
.store-link.yahoo:hover {
  color: #ffffff !important;
}
.store-link.ruten:hover {
  color: #0d1b2a !important;
}