/**
 * 簡潔高效主題系統
 * Clean & Efficient Theme System
 * 專注性能和可讀性
 */

/* ===== CSS 變數系統 ===== */
:root {
  /* 淺色模式 - 高對比度 */
  --light-bg: #ffffff;
  --light-bg-soft: #f8fafc;
  --light-surface: #ffffff;
  --light-text: #0f172a;
  --light-text-soft: #374151;
  --light-border: #1f2937;
  --light-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
  
  /* 深色模式 - 高對比度 */
  --dark-bg: #0f172a;
  --dark-bg-soft: #1e293b;
  --dark-surface: #334155;
  --dark-text: #f8fafc;
  --dark-text-soft: #e2e8f0;
  --dark-border: #e2e8f0;
  --dark-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  
  /* 色彩點綴 - 單一主色調 */
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-light: #dbeafe;
  
  /* 過渡效果 - 減少動畫 */
  --transition: all 0.2s ease;
}

/* ===== 基礎樣式 ===== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--light-bg);
  color: var(--light-text);
  transition: var(--transition);
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
}

/* ===== 深色模式 ===== */
html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background: var(--dark-bg);
  color: var(--dark-text);
}

/* ===== 工具卡片組件 ===== */
.tool-card, .card {
  background: var(--light-surface);
  border: 3px solid var(--light-border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--light-shadow);
  transition: var(--transition);
  color: var(--light-text);
}

.tool-card h1, .tool-card h2, .tool-card h3, .tool-card h4, .tool-card h5, .tool-card h6,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
  color: var(--light-text);
}

.tool-card p, .tool-card span, .tool-card div,
.card p, .card span, .card div {
  color: var(--light-text-soft);
}

.tool-card:hover, .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.2);
  border-color: var(--accent);
}

htmlhtml[data-theme="dark"] .tool-card,
htmlhtml[data-theme="dark"] .card {
  background: var(--dark-surface);
  border: 3px solid var(--dark-border);
  box-shadow: var(--dark-shadow);
  color: var(--dark-text);
}

htmlhtml[data-theme="dark"] .tool-card h1, htmlhtml[data-theme="dark"] .tool-card h2, htmlhtml[data-theme="dark"] .tool-card h3,
htmlhtml[data-theme="dark"] .tool-card h4, htmlhtml[data-theme="dark"] .tool-card h5, htmlhtml[data-theme="dark"] .tool-card h6,
htmlhtml[data-theme="dark"] .card h1, htmlhtml[data-theme="dark"] .card h2, htmlhtml[data-theme="dark"] .card h3,
htmlhtml[data-theme="dark"] .card h4, htmlhtml[data-theme="dark"] .card h5, htmlhtml[data-theme="dark"] .card h6 {
  color: var(--dark-text);
}

htmlhtml[data-theme="dark"] .tool-card p, htmlhtml[data-theme="dark"] .tool-card span, htmlhtml[data-theme="dark"] .tool-card div,
htmlhtml[data-theme="dark"] .card p, htmlhtml[data-theme="dark"] .card span, htmlhtml[data-theme="dark"] .card div {
  color: var(--dark-text-soft);
}

htmlhtml[data-theme="dark"] .tool-card:hover,
htmlhtml[data-theme="dark"] .card:hover {
  box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.6);
  border-color: var(--accent);
}

/* ===== 強化邊框顯示 ===== */
.tool-card {
  border: 3px solid var(--light-border);
}

htmlhtml[data-theme="dark"] .tool-card {
  border: 3px solid var(--dark-border);
}

/* ===== 按鈕組件 ===== */
.btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--light-bg-soft);
  color: var(--light-text);
  border: 1px solid var(--light-border);
}

.btn-secondary:hover {
  background: var(--light-border);
}

html[data-theme="dark"] .btn-secondary {
  background: var(--dark-bg-soft);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html[data-theme="dark"] .btn-secondary:hover {
  background: var(--dark-border);
}

/* ===== 文字樣式 ===== */
h1, h2, h3, h4, h5, h6 {
  color: var(--light-text);
  font-weight: 600;
  line-height: 1.3;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: var(--dark-text);
}

p {
  color: var(--light-text-soft);
}

html[data-theme="dark"] p {
  color: var(--dark-text-soft);
}

/* ===== 滾動條 ===== */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--light-bg-soft);
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover);
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--dark-bg-soft);
}

/* ===== 輸入框 ===== */
input, textarea, select {
  background: var(--light-surface);
  border: 1px solid var(--light-border);
  border-radius: 8px;
  padding: 0.75rem;
  color: var(--light-text);
  transition: var(--transition);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--dark-surface);
  border-color: var(--dark-border);
  color: var(--dark-text);
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* ===== 通用深色模式支持 ===== */
html[data-theme="dark"] *:not(.close-btn) {
  border-color: var(--dark-border);
}

htmlhtml[data-theme="dark"] body {
  background: var(--dark-bg);
  color: var(--dark-text);
}

htmlhtml[data-theme="dark"] h1,
htmlhtml[data-theme="dark"] h2,
htmlhtml[data-theme="dark"] h3,
htmlhtml[data-theme="dark"] h4,
htmlhtml[data-theme="dark"] h5,
htmlhtml[data-theme="dark"] h6 {
  color: var(--dark-text);
}

htmlhtml[data-theme="dark"] p,
htmlhtml[data-theme="dark"] span,
htmlhtml[data-theme="dark"] div,
htmlhtml[data-theme="dark"] label {
  color: var(--dark-text-soft);
}

htmlhtml[data-theme="dark"] .title {
  color: var(--dark-text);
}

htmlhtml[data-theme="dark"] .description {
  color: var(--dark-text-soft);
}

htmlhtml[data-theme="dark"] .subtitle {
  color: var(--dark-text-soft);
}

/* ===== 表單元素深色模式 ===== */
htmlhtml[data-theme="dark"] input,
htmlhtml[data-theme="dark"] textarea,
htmlhtml[data-theme="dark"] select {
  background: var(--dark-surface);
  border-color: var(--dark-border);
  color: var(--dark-text);
}

htmlhtml[data-theme="dark"] button {
  background: var(--accent);
  color: white;
  border: none;
}

/* ===== 強化邊框顯示 ===== */
.tool-card,
.card {
  border: 2px solid var(--light-border);
}

htmlhtml[data-theme="dark"] .tool-card,
htmlhtml[data-theme="dark"] .card {
  border: 2px solid var(--dark-border);
  background: var(--dark-surface);
  color: var(--dark-text);
}

/* ===== Close Button 專門樣式 ===== */
.close-btn {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(59, 130, 246, 0.7);
  background: transparent;
  color: rgba(59, 130, 246, 0.8);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: normal;
  transition: all 0.2s ease;
  outline: none;
  box-shadow: none;
}

.close-btn:hover {
  border-color: rgba(37, 99, 235, 0.8);
  background: rgba(59, 130, 246, 0.1);
  color: rgba(37, 99, 235, 0.9);
  transform: scale(1.05);
}

htmlhtml[data-theme="dark"] .close-btn {
  border-color: rgba(96, 165, 250, 0.7);
  color: rgba(96, 165, 250, 0.8);
}

htmlhtml[data-theme="dark"] .close-btn:hover {
  border-color: rgba(59, 130, 246, 0.8);
  background: rgba(96, 165, 250, 0.1);
  color: rgba(59, 130, 246, 0.9);
}

/* ===== 特殊元素強化 ===== */
.container,
.main-content,
.tool-section,
.editor-section {
  background: var(--light-bg);
  color: var(--light-text);
}

htmlhtml[data-theme="dark"] .container,
htmlhtml[data-theme="dark"] .main-content,
htmlhtml[data-theme="dark"] .tool-section,
htmlhtml[data-theme="dark"] .editor-section {
  background: var(--dark-bg);
  color: var(--dark-text);
}