:root {
  /* 品牌色系 */
  --brand: #14b8a6;
  --brand-50: #ecfdf5;
  --brand-600: #0d9488;
  
  /* 文字與背景 */
  --ink: #0f172a;
  --muted: #64748b;
  --panel: #ffffff;
  --panel-card: #ffffff;
  
  /* 裝飾性 */
  --ring: #d1fae5;
  --shadow: 0 10px 30px rgba(2, 6, 23, .08);
  --border: #e2e8f0;
  
  /* 連結 */
  --link-bg: #f0f9ff;
  --link-border: #e0f2fe;
  --link-color: #0369a1;
  
  /* 尺寸變數 */
  --nav-height: 60px;
}

/* --- 基礎重置 (Reset) 與 全域設定 --- */
html { 
  scroll-behavior: smooth; 
}

html, body { 
  margin: 0; 
  padding: 0; 
  background: #f8fafc; 
  color: var(--ink); 
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, Noto Sans TC, sans-serif; 
  display: flex; 
  flex-direction: column; 
  min-height: 100vh; 
  padding-bottom: 80px; /* 預留底部導航空間 */
}

a { 
  text-decoration: none; 
  color: inherit; 
}

button { 
  font-family: inherit; 
}

/* Dark Mode 變數覆寫 */
html[data-theme="dark"] { 
  --brand-50: #134e4a; 
  --ink: #e2e8f0; 
  --muted: #94a3b8; 
  --panel: #0f172a; 
  --panel-card: #1e293b; 
  --ring: #0f766e; 
  --shadow: 0 10px 30px rgba(0, 0, 0, .25); 
  --link-bg: #1e3a8a; 
  --link-border: #1e40af; 
  --link-color: #93c5fd; 
  
  /* Dark Mode 特定變數 */
  --form-input-bg: #334155;
  --form-input-border: #475569;
}

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